Question

我有一个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的顶部和css文件中，该文件控制IE字体并且不提供背景渐变。但是......在Firefox和Chrome中页面看起来很棒。

如果我将语句更改为：

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

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

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

这是在Glassfish 3.1.2上运行。

Answer 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＆gt; = 9中。

Answer 2

所以这就是问题所在。我正在使用facelets，这是在模板文件中。我没有意识到的是，通常应用的条件语句不适用于facelets。当由servlet处理时，它只是删除它没有“获取”的任何内容，因此读取所有样式表。

如果要对facelets使用条件语句，则必须将它们放在类似元素的内容中。它可能变得丑陋。

幸运的是，名为BalusC的堆叠器已经提出了一个聪明的库，其中包含用于处理条件语句的标记。经过一天的尝试每一个方向，并在任何地方寻找，我终于找到了一个帖子，提到了facelets和条件语句的这个问题。这导致了一个“Omnifaces”项目的Google代码页，其中记录了标记（以及一堆其他有用的功能）。

该库可以通过maven（我得到它）的方式获得，但可能还有其他方式。无论如何，阅读帖子到修复代码大概是半小时，如果那样的话。

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

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

Firefox有条件的IE语句被Firefox读取

2 个答案: