如何为LESS CSS应用IE修复程序

时间:2013-04-01 09:44:34

标签: css internet-explorer less

我的网页代码是:

<!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>

现在实际问题是:

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

上面的CSS黑客工作正常IE8但没有:

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

我在标题中使用的这个元标记。只要我再次放入那个元标记,这个黑客就会停止工作。

是否有任何解决方案可以将这两种方法完美地结合在一起?

1 个答案:

答案 0 :(得分:2)

LESS被编译成CSS,所以你要做的就是确保编译的CSS能够在Internet Exploder中运行。

如果你正在使用ie-specific classes,那么你可以轻松创建以IE为目标的mixin,例如:

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