How to apply IE Fixes for LESS CSS [closed]


Tags: css,internet-explorer,less

Problem :

My page code is:

<!doctype html>
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]--><head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="shortcut icon" href="favicon.ico">

<title>BLUE MONDAY-HOMEPAGE</title>

<!--Default style sheet-->
<link rel="stylesheet/less" href="css/blue.less" media="screen" type="text/css"      title="defaultBlue">
<script src="js/less-1.0.21.min.js"></script>

Now Practical question is :

/*IE hack */
.ie8 .headerPhone
{ width:200px; 
}

Above CSS hack working fine for IE8 but without:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

this meta Tag I used in header. As soon as I put that meta tag again this hack stop working.

Is there any solution that both things will work fine together?



Solution :

LESS gets compiled into CSS, so all you have to do is make sure that the compiled CSS will work in Internet Exploder.

If you're using ie-specific classes, then you can easily create mixins that will target IE, such as:

.inline-block() {
    display: inline-block;
    .lt-ie8 & {
        display: inline;
        zoom: 1;
    }
}

    CSS Howto..

    How to have a box increase its size based on its content?

    How to control the appearance of a widget on client web sites CSS

    Using Bootstrap, how can I put divs in different rows depending on the breakpoint?

    How to show html template using inline styles only?

    how can we prevent a block from being printed across different pages

    How to set input text color, but not placeholder color, in IE11

    How to use Chrome Inspector to show the popup css for a jquery plugin

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to align buttons properly in css/asp.net?

    How can i have CSS3 animating menu like followbubble.com

    How to replace @media (max-width) using Stylish or Greasemonkey?

    How to change a div top margin without leaving a white space?

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    How can I use JQuery to replace CSS background image and maintain gradient?

    How to make divs have table-like borders?

    CSS - How do I style a select to fully occupy the td it is in

    How do I add a class to a default bootstrap class

    How to use two JavaScript (.js) files on one website?

    How can we retrive style from css by selector without creating element?

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    CSS: How to create colsgroup like semantic-ui way

    How to set DIV's width based on CSS indexes

    Selenium IDE - How to check that an element is (CSS) visible?

    How can images be resized using Bootstrap

    css code how to remove space between div class

    How to delete white space between two div element when they display as inline-block [duplicate]

    How to hide a segment of my website using PHP

    How to change header size in css

    How to edit css live with ie6