-3

私のページコードは次のとおりです。

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

ヘッダーで使用したこのメタ タグ。そのメタタグを再度配置するとすぐに、このハックは機能しなくなります。

両方がうまく連携する解決策はありますか？

4

1 に答える 1

2

LESS は CSS にコンパイルされるため、コンパイルされた CSS が Internet Exploder で動作することを確認するだけで済みます。

IE固有のクラスを使用している場合は、次のような IE を対象とする mixin を簡単に作成できます。

.inline-block() {
    display: inline-block;
    .lt-ie8 & {
        display: inline;
        zoom: 1;
    }
}
于 2013-04-01T18:15:03.627 に答える