html5boilerplate IE 条件不起作用答案

【问题标题】：html5boilerplate IE conditional not workinghtml5boilerplate IE 条件不起作用
【发布时间】：2012-06-06 17:53:03
【问题描述】：

好的，这是我第一次使用 html5boilerplate，但无法从我的 css 文件中获取 IE 样式。

我在标题中有这个（根据页面设置）

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

在我的样式表中我有

#container { float:right; margin-top: 0px; }

.ie6 #container { margin-top: 5px; }

.ie7 #container { margin-top: 10px; }

.ie8 #container { margin-top: 15px; }

它不起作用。真的那么简单吗，我是不是错过了什么。

感谢您的建议。

【问题讨论】：

标签： css internet-explorer html5boilerplate

【解决方案1】：

除非您使用一些 javescript shiv，否则您应该使用实际定义的内容：

html class="no-js lt-ie9 lt-ie8 lt-ie7

那就试试吧，

#container { float:right; margin-top: 0px; }

.lt-ie7 #container { margin-top: 5px; }

.lt-ie8 #container { margin-top: 10px; }

.lt-ie9 #container { margin-top: 15px; }

【讨论】：

非常感谢，现在这么简单，一直在疯狂地工作，错过了。非常感谢。

【解决方案2】：

CSS 类名不匹配。例如，条件注释中的 lt-ie8 和样式表中的 ie8。

我用过的一个版本：

<!--[if lt IE 7 ]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

结合 CSS 规则，例如：

.ie6 #container {...}
.ie7 #container {...}
.ie8 #container {...}

【讨论】：

非常感谢，我不敢相信我错过了。那是完美的。非常感谢。

【解决方案3】：

我在这些条件语句中看到名为“lt-ie7”、“lt-ie8”和“lt-ie9”的类，但在您的 CSS 中，我看到您使用名为“ie6”、“ie7”和“ ie8"，这是不同的。试试：

#container { float:right; margin-top: 0px; }

.lt-ie7 #container { margin-top: 5px; }

.lt-ie8 #container { margin-top: 10px; }

.lt-ie9 #container { margin-top: 15px; }

【讨论】：