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>元素代替。