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

Question

我正在尝试使用 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 .这是怎么引起的，我该如何解决？

Answer 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>