HTML5 Boilerplate <head> 脚本和移动设计答案

【问题标题】：HTML5 Boilerplate <head> script & Designing for mobileHTML5 Boilerplate <head> 脚本和移动设计
【发布时间】：2012-02-05 04:23:32
【问题描述】：

最近我遇到了 HTML5 Boilerplate 并喜欢它！但是有一部分我不明白。

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

Paul Irish 说我们可以使用它来代替条件样式表和 CSS hack。有没有人有这方面的经验，就像我阅读他的博客一样多次我仍然无法理解它。

现在我正在使用 CSS3 媒体查询，但它在 IE 中根本不起作用，我只是一个幸运的人，CSS3-mediaqueries.js 文件（或类似的文件）和 respond.js 文件只是不要'不适合我。所以我决定条件 cmets 或特定样式表适合我，但我记得这个设置但真的不知道如何使用它。

非常感谢任何帮助！

【问题讨论】：

标签： html html5boilerplate

【解决方案1】：

正如您所推测的，这些就是所谓的条件 cmets。它们根本不是任何标准的一部分。

它们是 IE 所做的一件有趣的事情 - 它实际上解析了应该是非活动数据的文本！但它应该可以工作。

您使用它的方式很简单：如果您使用的是 blah 元素设置为 .ie6 blah。一个更具体的例子：假设您希望您的超链接在用户使用 IE8 时为红色，否则为绿色。这是一些 CSS：

a {
    color: green;
}

.ie8 a {
    color: red;
}

由于“a 是具有类ie8 的元素的后代”比“任何a”更具体，因此后者适用并且在IE8 中链接将是红色的。此逻辑仅适用于 IE8，因为这是 IE8 的条件注释被解释为 HTML 的一部分（而不是被注释掉）的唯一情况。

唯一可能令人困惑的一点是最后一行，您有一个 --> inside 注释块：这意味着完全忽略条件 cmets 的浏览器仍然会看到 HTML在最后一个块中（以及 IE > 9 和非 IE-but-still-interpreting-conditional-cmets 浏览器）。

【讨论】：

这是为 IE 设置样式而不是我的媒体查询的好方法吗？因为现在，如果您以任何 IE 版本（当然 IE 9 除外）访问我的网站，您会看到移动版本的样式。不知道为什么。如果我向您提供指向我的网站的链接，您能否帮助我解决此问题并就用于我的网站的适当方法提供建议，以便您了解它可能在做什么？这是我第一次为移动设备和平板电脑用户使用 HTML 5 和样式，所以很困惑。
@AmberGoodwin 这是为 IE 设置样式的好方法。除了建议您将<!DOCTYPE html> 作为文档中的第一件事之外，我对特定于 IE 的行为（我总是为 W3C 标准编写代码）知之甚少，无法告诉您为什么您的网站表现不佳。对不起。
那没关系。我很感激这个答案。我会全力以赴。谢谢！