资源管理器中 html 标记上 CSS 类的条件注释答案

【问题标题】：Conditional comments for CSS class on html tag in Explorer资源管理器中 html 标记上 CSS 类的条件注释
【发布时间】：2014-07-02 04:22:56
【问题描述】：

我是 Web 开发的初学者，我需要其他经验丰富的 Web 开发人员的帮助。对于 IE 的兼容性问题，我遇到了 Paul Irish 的 Conditional cmets，但我对它非常满意。下面的代码在 doctype html 之后或 head 标记中去哪里？

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

请举例说明这些类中的代码到底是什么。

【问题讨论】：

..但我对它很绿..而且图像很蓝色 ;)
为了将来参考，编辑器中的 {} 符号允许您将代码块添加到您的问题中，这意味着回答您问题的人可以在必要时复制/粘贴您的代码（在这里，它有点像is) - 比使用图像显示代码更有效！
只是为了补充下面的答案。不要使用条件 cmets，它们现在已被弃用。您确实需要利用特征检测等。
@ChrisLove 我该怎么做？有 javascript 代码吗？
@ChrisLove 所以我使用modernizr？

标签： html css internet-explorer

【解决方案1】：

我偶然发现了这个网站Better conditional classnames for hack-free CSS

其中解释了使用条件 cmets 的其他不同方式。

它描述了三种应用条件 cmets 的方法：

“冒泡”条件 cmets 方法
“抢先式”条件 cmets 方法
“冒泡”条件 cmets 方法，不包括文档头部的条件 cmets。

有关使用条件注释的不同平台的更多信息，请访问此站点http://conditionalcomment.com，其中包含您寻找的各种代码。

PHP 可以去任何地方。如果您想将其用于浏览器检测和备用 CSS，请将其放在头部。并且，像正文中的任何其他 PHP 字符串一样使用它。如果您检查许多不同的浏览器、浏览器版本或操作系统，那么您可能希望将其制成一个文件并将该文件包含在头中。只要去你就会得到代码：killersites

【讨论】：

【解决方案2】：

注释块被设计用来代替html 标签，所以在之后是doctype 声明。

但是...

考虑到这一点 - 我倾向于敦促您不要针对 IE，或者更糟的是，在您的 CSS 中使用特定版本的 IE。

您应该始终努力创建一个跨浏览器兼容的布局（HTML 和样式），支持progressive enhancement 和graceful degradation。我很欣赏这并不总是非常容易，但在日益复杂的网站中，它比尝试专门迎合不同浏览器的不同版本要好得多，而不是学习如何实现由全部。

从长远来看，特别是如果您正在学习 CSS-您将不可避免地遇到最初的挫败感，但通过不使用条件 cmets，您会学到更多。 p>

正如该答案的 cmets 中所述，条件 cmets 基本上接受您正在或将要引入错误并围绕它进行编码 - 关键是 您永远不应该接受您首先是引入错误，但代码是为了防止它发生。您应该通过使用优雅降级的样式和属性在 CSS 中实现容错。

【讨论】：

关于渐进增强的 SW4 问题，您是否有一个网站可以让我学习（尤其是 HTML、CSS 和 JavaScript），其中包含渐进增强的原则？
@Ng'esh - 不是我使用的，但来自 google 的最佳结果看起来像一个不错的介绍：alistapart.com/article/progressiveenhancementwithcss，只是 google 'CSS 渐进增强'
关于容错，我理解 HTML 旨在向前兼容，允许不理解它们的 Web 浏览器忽略新的 HTML 实体，而不会导致文档不可用。这不是建议我们使用条件注释，您建议不要使用条件 cmets。我想请您解释一下您的最后陈述。
感谢您的链接。至少我们正在前往某个地方。我从同一个站点找到了一个用于 JavaScript 的站点：alistapart.com/article/progressiveenhancementwithjavascript
@Ng'esh 关于容错，有条件的 cmets 基本上接受您正在引入错误，并围绕它进行编码 - 关键是您永远不应该 accept 您正在引入错误首先是防止它出现的代码。您应该通过使用优雅降级的样式和属性在 CSS 中实现容错

【解决方案3】：

该代码尤其位于DOCTYPE 标记之后，因为它是<html> 开始标记的有条件替换。

<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6"><!endif>-->
...etc.
<head>...</head>
<body>...</body>
</html>

这些类（ie6、ie7、ie8 等）旨在包含样式以解决跨浏览器的样式不一致问题。

在这方面，您可能想看看Normalize 和Reset，它们旨在让您的跨浏览器渲染更轻松。

【讨论】：

但是您是否必须编辑 css 文件以适应您正在创建的网站的设计？

【解决方案4】：

你可以用这个替换你的 html-tag，所以它在 doctype 之下。它在 html-tag 中设置不同的类，您可以在 CSS 和 JavaScript 中使用，如果您想为某个浏览器设置特殊样式，或者如果您想为旧版本的 IE 包含 fallback-scripts。

【讨论】：

你能给我一个除了 css 之外的后备脚本的例子吗？
假设您想要一个元素淡入或淡出，并使用 CSS3 过渡来实现。这在版本 9 以下的 IE 中不起作用，因此您可以在这些情况下添加脚本后备，可能像这样：if($('html').hasClass('ie8')){ $(element).fadeIn(); }

【解决方案5】：

您发布的代码将位于 doctype 声明的下方。

<!DOCTYPE html>
// THE CODE HERE

给出类名以便 CSS 可以应用于某些版本的 IE，因为并非所有 CSS 都适用于每个版本的 IE。

例如，您可以将元素设置为仅在 IE8 中具有固定高度

html.ie8 #someElement {
  height: 200px;
}

【讨论】：

另一种解释定位的方式（不值得自己回答）：通常会有<html> 标签，因为这些只是向该标签添加类。如果当前页面中没有 <html> 标记，则它不是有效的 HTML。