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是唯一实际解释匹配的评论内容的浏览器。请注意，其他浏览器不会解释它们，仍然会将它们视为。

当您使用!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> resp。而是<link>元素。

！使用OmniFaces的IE条件评论

1 个答案: