!IE 条件注释使用 OmniFaces

Question

我正在根据条件 cmets 设置图像宽度，如下所示。

<o:conditionalComment if="lte IE 9">
    <style>
        .image-width {
            width: 210px;
        }
    </style>
</o:conditionalComment>

<o:conditionalComment if="!IE">
    <style>
        .image-width {
            width: 216px;
        }
    </style>
</o:conditionalComment>

它适用于 Internet Explorer (8)。 IE 8 将图像宽度设置为210px。但是，其他浏览器上的图像宽度应设置为216px。最后一个条件注释，即 !IE 在其他浏览器（Chrome 和 FF）上不起作用。

如何在IE以外的浏览器上应用width: 216px;样式？

---

生成的 HTML 代码看起来是正确的，如下所示。

<!--[if lte IE 9]>
    <style>
        .image-width {
            width: 210px;
        }
    </style><![endif]-->

<!--[if !IE]>
    <style>
        .image-width {
            width: 216px;
        }
    </style><![endif]-->

Answer 1

!IE 有点极端的条件注释条件。完全没用。

基本上，每个浏览器都会忽略 cmets <!-- ... --> 中的所有内容。 IE 是唯一真正解释匹配<!--[if ...]> ... <![endif]--> 的cmets 内容的浏览器。请注意，其他浏览器不会解释它们，并且仍将它们视为<!-- ... -->。

当您使用!IE 时，IE 浏览器不会解释评论的内容。但其他非 IE 浏览器也不支持，原因很简单，它们不支持条件 cmets。实际上，评论没有被任何浏览器解析。它与<!-- ... --> 的效果完全相同。 !IE 条件存在的唯一可行原因是微软假设“其他”浏览器将来也会支持条件 cmets（这毕竟是一个严重的错误假设；更重要的是，从 IE10 开始就删除了对条件 cmets 的支持） .

为了实现您的具体功能要求，您最好交换两种样式声明，并使主要的一种无条件。在 CSS 中，后者声明的优先级更高。

<style>
    .image-width {
        width: 216px;
    }
</style>
<o:conditionalComment if="lte IE 9">
    <style>
        .image-width {
            width: 210px;
        }
    </style>
</o:conditionalComment>

就这么简单。连 IE 都明白。

顺便说一句，你最好使用<h:outputStylesheet> resp。 <link> 元素。