内部样式表在带有 jsf 的 IE9 中不起作用

Question

我正在使用带有 primefaces 的 jsf2.0。我的应用程序在包括 IE8 在内的所有浏览器上都可以正常工作......但是当我在 IE9 中运行我的应用程序时，我的内部样式表甚至没有被浏览器（IE9）采用......样式被破坏了.

我的 css 在头上：

<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Chennai Volunteers</title>
<link href="cv_website_styles.css" rel="stylesheet"  type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</h:head>

我在控制台中收到以下错误，

java.lang.IllegalArgumentException: ContentTypeList does not contain a supported content type: text/css
at org.apache.myfaces.shared_impl.renderkit.html.HtmlRendererUtils.selectContentType(HtmlRendererUtils.java:1905)
at org.apache.myfaces.renderkit.html.HtmlRenderKitImpl.createResponseWriter(HtmlRenderKitImpl.java:223)
at org.apache.myfaces.shared_impl.view.JspViewDeclarationLanguageBase.renderView(JspViewDeclarationLanguageBase.java:154)
at org.apache.myfaces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:263)
at org.apache.myfaces.lifecycle.RenderResponseExecutor.execute(RenderResponseExecutor.java:85)
at org.apache.myfaces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:239)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:191)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:304)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:224)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:185)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:151)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:405)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:269)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:515)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:300)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)

提前致谢。

Answer 1

我检查了您的网站 chennaivolunteers.org，发现 FacesServlet 映射到了 /faces/* 的 URL 模式，而不是 *.xhtml。由于您只使用相对的<link> 和<script> 资源引用，它们也将（不必要地）通过FacesServlet。

IE9 为 CSS 文件发送 text/css 的 Accept-Header，而其他浏览器发送 Accept-Header 的 text/css;*/*。 FacesServlet 本身不应该响应 text/css 请求。

基本上有两种方法可以解决这个问题：

• 去掉 /faces/* 映射并将其替换为 *.xhtml。

  <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  

• 在<link> 和<script>（和<img>）引用中使用域相对URL，这样它们就不会通过/faces 路径。

  <ui:param name="root" value="#{request.contextPath}/" />
  <link href="#{root}cv_website_styles.css" rel="stylesheet"  type="text/css" />
  <link rel="stylesheet" type="text/css" href="#{root}css/style.css"/>
  <script type="text/javascript" src="#{root}js/jquery.min.js"></script>
  <script type="text/javascript" src="#{root}js/script.js"></script>
  

  或使用<base> 标签，或使用<h:outputStylesheet> 和<h:outputScript> 与name 代替。

顺便说一句，您的网站在多个资源上都有相当多的 404。也解决这个问题。检查浏览器内置 Web 开发工具集的“Net”、“Network”部分（在 IE9/Chrome/Firebug 中按 F12）。