1

我想要在我的 JSF 2 应用程序中做的是根据浏览器版本设置正确的 html 样式，这里是示例代码：

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->

如何在 JSF 2 中做到这一点？最好/最简单的方法是什么？

我在 Omnifaces ( o:conditionalComment) 中发现了一些有趣的东西，但它只允许有条件地加载整个 css，这对我来说没用......

4

3 回答 3

6

仅<o:conditionalComment>适用于 CSS 文件是不正确的。这是一种误解。从技术上讲，使用纯 Facelets 标记/组件根本无法满足您的要求，因为这会导致 XML 语法格式错误，从而导致 Facelets 编译错误。

<o:conditionalComment if="lt IE 7">
    <html lang="en" class="lt-ie9 lt-ie8 lt-ie7">
</o:conditionalComment>
<o:conditionalComment if="IE 7">
    <html lang="en" class="lt-ie9 lt-ie8">
</o:conditionalComment>
<o:conditionalComment if="IE 8">
    <html lang="en" class="lt-ie9">
</o:conditionalComment>
<o:conditionalComment if="gt IE 8">
    <h:outputText value="&lt;!--&gt;" escape="false" />
    <html lang="en" class="no-js">
    <h:outputText value="&lt;!--" escape="false" />
</o:conditionalComment>
...
</html>

这不是 格式良好的XML。您知道，XML 结束元素应该​​与 XML 开始元素在同一范围内。如果每个XML 元素在同一个父 XML 元素中<html>都有自己的，那么它将是有效的 XML 。</html>但这又不是有效的 HTML。

只需<h:outputText escape="false">在所有<html>标签上使用。不要忘记对结束</html>标签做同样的事情。

<o:conditionalComment if="lt IE 7">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9 lt-ie8 lt-ie7&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="IE 7">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9 lt-ie8&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="IE 8">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="gt IE 8">
    <h:outputText value="&lt;!--&gt;&lt;html lang=&quot;en&quot; class=&quot;no-js&quot;&gt;&lt;!--" escape="false" />
</o:conditionalComment>
...
<h:outputText value="&lt;/html&gt;" escape="false" />

很尴尬，但HTML5 样板（这种方法的起源）本身也很尴尬，IMO。

或者，您可以考虑<my:html>自己创建一个自定义组件，该组件会生成所需的标记，这样您就可以满足<my:html>...</my:html>.

于 2012-07-30T13:05:53.317 回答
3

您可以使用相同的类制作 3 个 CSS（每个浏览器一个）。您的 HTML 代码会更简单。

在标题中，您可以像这样使用特定的浏览器 css：

<h:outputStylesheet library="css" name="ie_7.css" rendered="#{header['User-Agent'].contains('; MSIE 7')}" />
于 2012-07-30T14:19:33.287 回答
2

您不应有条件地声明<html>元素。

如果使用 Chrome 或 Firefox 的人想要访问您的网站怎么办？

公认的做法是创建 IE 版本特定.css文件并使用 IE 宏有条件地加载这些文件。

例如

<link href="global_styles.css" rel="stylesheet" type="text/css"/>
<!--[if IE 7]-->
<link href="IE7_styles.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<!--[if lte IE 6]-->
<link href="IE6_styles.css" rel="stylesheet" type="text/css"/>
<![endif]-->

在 IE6_styles.css 中，您可能会向html类添加一些特定属性，并且可能会* htmlhack。这种方法的美妙之处在于它可以在旧的 IE 浏览器中运行，但不会破坏现代浏览器。

顺便说一句，这个例子来自 David McFarland 的“CSS: the missing manual”。

于 2012-07-30T12:57:38.537 回答