<!--[if IE]> 条件注释在 Facelets 中呈现 HTML 转义

Posted 2023-02-21

【中文标题】<!--[if IE]> 条件注释在 Facelets 中呈现 HTML 转义

【英文标题】：<!--[if IE]> conditional comments are rendered HTML-escaped in Facelets

【发布时间】：2012-01-24 08:46:47

【问题描述】：

我正在尝试使用 IE 条件注释来声明 CSS 资源：

<h:outputStylesheet name="common.css" library="css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="#resource['css:ie.css']" />   
<![endif]-->    

但是，这似乎不起作用。我在生成的 html 输出中看到了这一点：

<link type="text/css" rel="stylesheet" href="/context/faces/javax.faces.resource/common.css?ln=css" />        
<!--[if IE]&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/context/faces/javax.faces.resource/ie.css?ln=css&quot;/&gt;
&lt;![endif]-->

没有条件注释它可以正常工作。我没有使用上下文参数javax.faces.FACELETS_SKIP_COMMENTS。这是如何引起的，我该如何解决？

【问题讨论】：

生成的 HTML 中有没有？在浏览器中打开页面，右键单击并查看源代码。

不，这很奇怪，我在 IE 或 FireFox 中都找不到它。

【参考方案1】：

这确实不起作用，因为 Facelets 会隐式地对评论内容进行 HTML 转义。最好的办法是将其放在<h:outputText escape="false"> 中，如下所示：

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

然而，这是一条丑陋的路线。 The OmniFaces JSF utility library 有一个 <o:conditionalComment> 就是为了这个目的：

<o:conditionalComment if="IE">
    <link rel="stylesheet" type="text/css" href="#resource['css:ie.css']" />   
</o:conditionalComment>

---

与具体问题无关，您并没有真正以正确的方式使用library 属性。它应该标识一个常见的“主题”，而不是文件所在的子文件夹，只需将该子文件夹放在 name 属性中即可。另见What is the JSF resource library for and how should it be used?

<h:outputStylesheet name="css/common.css" />
<o:conditionalComment if="IE">
    <link rel="stylesheet" type="text/css" href="#resource['css/ie.css']" />   
</o:conditionalComment>

【讨论】：

outputText 解决方案工作得很好，但 param 解决方案仍然不起作用，我不知道为什么。

【参考方案2】：

我建议

<h:outputText value="&lt;!--[if IE]&gt; " escape="false"/>
  <link rel="stylesheet" type="text/css" href="#request.contextPath/faces/javax.faces.resource/ie.css?ln=css" />
<h:outputText value=" &lt;![endif]--&gt;" escape="false"/>

因此，您只需转义一小段代码，#request.contextPath 就会按预期工作