css - !IE 使用 OmniFaces 进行条件注释

Question

我根据条件注释设置图像宽度，如下所示。

<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有点极端的条件评论条件。这是完全没用的。

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

当您使用!IE时，那么IE浏览器将不会解释评论的内容。但其他非 IE 浏览器也不支持，原因很简单，它们不支持条件注释。实际上，任何浏览器都不会解析该评论。和 <!-- ... --> 效果完全一样。唯一可行的原因!IE存在的条件是，微软假设“其他”浏览器在未来的某些情况下也会支持条件注释(这毕竟是一个严重的错误假设；更重要的是，自 IE10 以来，对条件注释的支持已被删除)。

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

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

就这么简单。甚至 IE 也明白这一点。

顺便说一下，你最好使用<h:outputStylesheet>分别。 <link>元素代替。