Question

我的JSF2应用程序中需要一些特定于浏览器的CSS（Mojarra 2.1，Tomcat 7）。

我尝试添加到我的模板中：

    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" />
    <![endif]-->

但由于我还使用了以下内容，因此不会呈现注释：

<context-param>
    <!-- Removes any comments from the rendered HTML pages. -->
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>

我的问题...当我禁用`javax.faces.FACELETS_SKIP_COMMENTS时，我遇到了一堆其他问题。而且我不认为我的源代码注释属于生成的页面。

我也尝试将开关放在CDATA中，如：

<![CDATA[
 <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE7}" />
 <![endif]-->
]]>

但内在＆lt;被渲染为html实体..： - /，所以它不起作用。

问题：还有其他解决方案吗？是否存在任何JSF2标记来处理这个问题？外部标签库？

提前致谢，史蒂夫

Answer 1

唯一的方法是使用<h:outputText escape="false">。

<h:outputText value="&lt;!--[if IE 8]&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;#{cfgs.externalCssUrlIE8}&quot; /&gt;&lt;![endif]--&gt;" escape="false" />

是的，这是一条丑陋的线条。但是没有其他标准方式。

更新：JSF实用程序库OmniFaces正是为此目的提供<o:conditionalComment>，因此您不再需要丑陋的<h:outputText escape="false">：

<o:conditionalComment if="IE 8">
    <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" />
</o:conditionalComment>

Answer 2

您可以使用条件注释的包含语法来使用解决方案。不是写，而是写<![if !IE 8]> ... <![endif]>。

换句话说，没有破折号可以作为评论。

这是合法的语法。这种语法的意图是条件部分由非IE浏览器读取，而使用破折号的语法，其他浏览器将忽略它。

当然，这对你的样式表有明显的影响 - 条件块中包含的CSS需要适用于IE8以外的所有浏览器（你会注意到我在上面添加的感叹号使它'不是IE8' ）; IE8特定的东西需要包含在您的标准样式表中，以便被条件块中的样式覆盖。

换句话说，与您目前正在尝试的相比，它是功能的逆转。

重要的一点是，这样做条件块不是注释，因此不应被解析器删除。

您可能需要重做一些事情，但它应该有用。

另一种选择当然是找到IE8特定的CSS hack。这些确实存在，但我建议尽可能避免使用它们，因为你将使CSS无效，并且在将来的浏览器版本中总会存在破坏它的危险。

但是如果你想沿着这条路走下去，这里有一个链接可以给你答案：http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

但除非你拥有，否则不要使用它。： - ）

希望有所帮助。

Answer 3

BalusC的答案是我的问题的正确答案。我仍想分享一个基于JavaScript + CSS的解决方案：CSS Browser Selector。

插入this minified line of JavaScript使您可以使用特定于操作系统和浏览器的CSS选择器，例如：

html.gecko div＃header {margin：1em; }

.opera #header {margin：1.2em; }

.ie .mylink {font-weight：bold; }

.mac.ie .mylink {font-weight：bold; }

。[os]。[浏览器] .mylink {font-weight：bold; }

如果您的浏览器特定样式仍处于开头，那么与包含许多.css文件相比，这可能是一个更清晰的解决方案。

依赖于浏览器的CSS切换与JSF

3 个答案: