Firefox 正在读取 CSS 条件 IE 语句答案

【问题标题】：CSS Conditional IE Statement Being Read by FirefoxFirefox 正在读取 CSS 条件 IE 语句
【发布时间】：2012-10-01 03:07:26
【问题描述】：

我有一个 CSS 困惑。

如果我这样做：

<!--[if gte IE 8]> <link href="/ELS_Soulard_Project-web/css/soulard_base_ie_butchery.css" rel="stylesheet" type="text/css" media="screen, projection" /> <![endif]-->

该行代码显示在 IE 9 的顶部，并且未读取控制 IE 字体并提供背景渐变的 css 文件。但是...该页面在 Firefox 和 Chrome 中看起来很棒。

如果我将语句更改为：

<!--[if gte IE 8]><!--> blah blah blah <!--<![endif]-->

品种繁多，在 IE 9 和 Chrome 中看起来很棒....但是！ Firefox 最终实际上读取了该文件，并最终缩小了自己的字体并更改了行高，因此这一切看起来都像丑陋的双倍间距。我知道 Firefox 正在读取它，因为我访问了仅适用于 IE 的文件并更改了内容，它反映在 Firefox 中。

有人可以帮我弄清楚发生了什么吗？

这是在 Glassfish 3.1.2 上运行的。

【问题讨论】：

作为说明，我在两个不同的场合运行了这些。所以他们不在同一个文件中。

标签： css internet-explorer firefox conditional stylesheet

【解决方案1】：

在您的第二个示例中，您在条件注释中添加了<!-->。这样条件注释仍然是打开的，但是 HTML 注释是关闭的，中间的代码可以被任何浏览器渲染。

与这个块比较：

<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="de-DE">
<!--<![endif]-->

最后一个标签被排除在几个 IE 版本中，但包含在任何非 MS 浏览器和 IE >= 9 中。

【讨论】：

这是 facelets 和条件句的问题。他们在一起玩得不好。

【解决方案2】：

所以这就是问题所在。我正在使用 facelets，这是在模板文件中。我没有意识到通常应用的条件语句不适用于 facelets。当被 servlet 处理时，它只会丢弃它没有“得到”的任何东西，因此所有样式表都会被读取。

如果您想在 facelets 中使用条件语句，您必须将它们放在元素之类的东西中。它会变得丑陋。

幸运的是，名为 BalusC 的堆栈器提供了一个聪明的库，其中包含一个用于处理条件语句的标签。经过一天的尝试各种方式并到处寻找之后，我终于找到了一篇文章，其中提到了这个问题与 facelets 和条件语句。这导致了一个“Omnifaces”项目的谷歌代码页，其中记录了标签（和许多其他有用的特性）。

该库可通过 maven（我得到它的地方）获得，但可能还有其他方式。无论如何，从阅读帖子到修复代码大约需要半个小时。

Facelets 加上 IE 条件语句 = 坏消息。

使用 outputText 或 Omnifaces 或编写您自己的组件。

【讨论】：