IE11 更改 JSF 重新渲染时的 DOM 结构答案

【问题标题】：IE11 Changes DOM structure on JSF rerenderIE11 更改 JSF 重新渲染时的 DOM 结构
【发布时间】：2014-03-27 17:51:43
【问题描述】：

好吧，这里有点奇怪，我没有看到任何其他报告，我们最近收到 IE11 用户报告的一些 UI 错误，经过一些测试后，我意识到在执行重新渲染后（我使用 A4J）IE11将 HTML 元素放在错误的位置，例如。

<s:div id="parent" rendered="#{someCondition}">
    <div id="brother"></div>
    <div id="sister"></div>
</s:div>

重新渲染后是这样的

<s:div id="parent" rendered="#{someCondition}">
    <div id="brother">
        <div id="sister"></div>
    </div>
</s:div>

这显然对布局造成了严重破坏

我经常混合 JSF/HTML 组件，但不认为这会导致问题吗？

任何想法可能导致这种情况？

JSF 1.2 |富脸3.3 |小面

【问题讨论】：

您找到解决此问题的方法了吗？在某些情况下可以通过更改 html 代码来避免这种情况（我猜重新渲染区域内只有一个节点），但这些只是在所有其他浏览器中都可以正常工作的代码的解决方法。
@Roben 是的，我想我发现了这个问题，它特定于 RichFaces issues.jboss.org/browse/RF-13443，我正要使用修补的 AJAX.js 进行测试，所以我会告诉你
谢谢。 sarissa 修复对我不起作用（几周前检查过），但也许我出了点问题。你一定要试一试。
@Roben 对我也不起作用，您是尝试使用新的 .jar 还是只是覆盖浏览器中的 .js 脚本？
我使用了一个覆盖 .js。这对于旧 RF 版本中的另一个错误已经很好用了，所以我想这应该不是问题。我想目前唯一可行的选择是解决这个问题并跳转到 JSF 2。

标签： richfaces facelets jsf-1.2 internet-explorer-11 ajax4jsf

【解决方案1】：

您是否尝试过为 IE8 渲染模式设置元标记：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

据我所知，RichFaces 3 最多仅支持 Internet Explorer 8，或者您可以考虑切换到 RichFaces 4 以获得当前的浏览器支持。

Microsoft: how to ensure compatibility

希望这会有所帮助。

【讨论】：

刚刚试了一下，它至少在一种特殊情况下有效，谢谢！事实上，如果您不想丢失较新的 CSS 功能，<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/> 在这种情况下就足够了。（我确定我之前尝试过X-UA-Compatible，但它不起作用 - 也许我当时有问题。）
我可以确认，<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/> 修复了 IE11 和 Richfaces 3.3.3 的问题。
我在 Richfaces 3.3.1 (autosuggest) 中遇到了类似的问题，我的支持 bean 中没有读取选定的值，但添加元标记 (IE 10) 解决了它 => 在这些字段上没有自动建议

【解决方案2】：

由于我的 ajax 渲染问题很简单，我选择更改实现（加载所有表单并仅使用 jQuery 切换可见性），但我已经花了一些时间来解决这个问题，我的贡献也随之而来。

可以通过以下更新修复一些渲染问题： https://ruleoftech.com/2015/patching-richfaces-3-3-3-ajax-js-for-ie11 http://ruleoftech.com/2013/patching-richfaces-3-3-3-ajax-js-for-ie9

您也可以尝试在richfaces-impl.jar org\ajax4jsf\javascript\scripts 中制作一个prototype.js 补丁，更改使用navigator.userAgent 将浏览器设置为IE 的方法。

Browser: {
IE: (!!(window.attachEvent &&
    navigator.userAgent.indexOf('Opera') === -1) 
    || (navigator.userAgent.toLowerCase().indexOf("like gecko") > -1 
    && navigator.userAgent.toLowerCase().indexOf("11.") > -1) )

现在，如果您在浏览器控制台上调试 Prototype.Browser，您就可以真正使用 IE11。

请注意，RF 可以“缩小”它正在使用的所有第三个库脚本。
检查 html 的<head> 中加载的文件。也许所有这些更改都应该在richfaces-impl-3.3.3.Final.jar/org/ajax4jsf/framework.pack.js 中进行。

【讨论】：

【解决方案3】：

我使用 patching-richfaces-3-3-3-ajax-js-for-ie9 指南能够将richfaces 3.3.3 与 ie11 一起使用。我刚刚在 Ajax.js 上更新了 Sarissa 的 0.9.9.7 版本。

元标记 X-UA-Compatible 在我的情况下无法使用它，它位于 iframe（子）中，我忽略了元标记。

【讨论】：