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 control the layout in JSF?

    How to adjust the width of a DIV per height using CSS

    How to keep two input box side by side in html using CSS?

    how to add embedded ruby in style tag

    How to apply style to the divs that are added dynamically?

    Flex 4 How to set background image to VBox?

    How to center a Dijit Select widget?

    How to add elements to an specified position without influence of other elements?

    Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

    How to use Auto compiler for less and sass in visual studio

    How to line up items of varied length in a resizable space in CSS?

    How make to flow around a triangular block?

    How can I make my CSS code compatible with all browsers? [closed]

    How to use 100% height with css

    How can I create an inline grouped listview in windows 8

    How to make Css transition effect work on Safari and Chrome?

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    How do I remove the gap between div tags?

    how to remove the css overflow:hidden of jquery dialog

    How to set body attribute in css using angularjs?

    How can I absolutely position a block of multi-line text relative to the bottom of the last line?

    How to bound CSS3 animation to class

    How to prevent divs from overlapping?

    How to Stop jQuery from Buffering Hover Effects?

    How do I make images interactive?

    How to add border to circular image on hover? css or jquery

    Optimizing CSS - how to properly reduce CSS footprint [closed]

    How to change active color of bootstrap button group to have different color for each button

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?