logo标签列表

IE9 + RichFaces 渲染问题

cssjsfrichfacesinternet-explorer-9
3
我有一个基于JSF 2.0 + Richfaces 3.3.3的Web应用程序，在除IE9之外的所有浏览器上运行良好。
在IE9中，如果没有兼容模式（启用兼容模式则无问题），它看起来像这样（忽略黑色文本）： enter image description here 注意，所有组件都被框起来，CSS被忽略（看不到？）
JSP代码如下（仅相关部分）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" href="css/pageStyle.css" type="text/css" >
</head>

<body>
...
</body>

CSS文件位于C:\apache\tomcat\webapps\MyWebApp\css\pageStyle.css。

有人有什么想法吗？谢谢！

更新 通过使用“开发者工具”捕获network选项卡中的数据包进行了一些研究。 CSS文件以Type=text/html的形式发送，而不是text/css。根据此问题，我认为这就是问题所在。

但我仍然不知道为什么会出现这种情况。正如您所看到的，文件类型在<link>标签中被明确标记为type="text/css。

另一个有趣的观察结果是，在Chrome开发者工具中检查相同的对象时，内容类型为text/css，因此可能是IE9的一个错误。我很困惑...

浏览器中是否有任何错误（js控制台，开发者工具）？ - Matt Handy
感谢@Matt Handy。请查看问题中的更新。 - Ben
你能在服务器上检查.css文件的MIME类型吗？我非常怀疑这是问题所在，除非有人胡乱操作。还要记录一下，链接标签应该是自闭合的，因为你使用了xhtml doctype（meta标签也是如此）。我也会尝试玩一下看看什么有效果，什么无效。比如重新排列属性，让type属性在href属性之前。谁知道呢？任何事情都可能发生。这已经是一个够奇怪的错误了。 - Matt
我建议升级到Richfaces 4 final和mojarra 2.1.1（如果您正在使用mojarra）。在以前的Richfaces / JSF版本中，我在IE9上遇到了问题，但是在最新版本中似乎已经解决了。 - Dave Maple
@Dave - 谢谢。由于我们在旧项目中使用JSP，迁移到xhtml的成本太高了。 - Ben
糟糕，我应该在发布之前阅读这个内容的。哈哈。 - Dave Maple
3个回答
3

RichFaces 3.x不支持IE9（也没有引入它的计划），请参考此主题： http://community.jboss.org/thread/156720

您可以升级到RF 4，

或实现一个过滤器来强制IE9以兼容模式运行：

public void doFilter(final ServletRequest request, final ServletResponse response, final FilterChain chain) throws IOException, ServletException {
    HttpServletResponse resp = (HttpServletResponse) response;
    resp.addHeader("X-UA-Compatible", "IE=EmulateIE8");
    chain.doFilter(request, resp);
}
2

Richfaces 3.3发布时IE9还未推出beta版，因此可能存在兼容性问题，因为该版本可能未经过与IE9的测试。

好消息是，您正在使用JSF 2，因此没有理由不升级到支持IE9的Richfaces 4 Final。

话虽如此，您使用的JSF版本似乎也很重要。我正在使用Mojarra，在版本2.0.4中，当许多Richfaces组件使用mojarra.ab（f：ajax）重新加载时，我遇到了问题。升级到2.1.1似乎已解决所有这些问题，现在我有针对IE9用户的Richfaces代码在生产中表现良好。

我建议您查看升级路径并确定其可行性。

谢谢Dave。虽然它并没有直接解决我的问题，但是知道这一点非常好:-) - Ben
2
问题在于IE9需要http响应中的css文件有定义了Content-Type头。 您的http响应头应该像这样：
Content-Type: text/css

可能的解决方案：您可以创建一个Servlet，捕获http请求并使用Content-Type值装饰响应头。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接