html - 修复了 Internet Explorer 9 中元素消失的问题

Question

我有一个在 ASP.NET MVC 中构建的网页，它使用固定定位来允许用户在滚动时始终看到行标题。

使用 Internet Explorer 9 时，固定元素会在滚动时从视图中消失并重新出现。我已经在 Chrome 中进行了测试，它在那里可以正常工作。我还确保 IE 使用的是标准模式而不是怪癖。

这个 jsfiddle 演示了我的问题：http: //jsfiddle.net/zache/43zCf/

 Doesn't fit the character limit.

Answer 1

z 索引元素的父级未定位。您必须添加到表中position: inherit; ，以便表的 css 将是：

table {
    position: inherit;
    white-space: nowrap;
    border-collapse: collapse;
}

Answer 2

这对我有用。

解决方案1：

在页面加载时添加滚动条，然后在短时间内将其删除。

Sys.Application.add_load(function(){
if ($.browser.version == 9 && $.browser.msie) {
    $('html').css('overflow-y','scroll');

    setTimeout(function () {
        $('html').css('overflow-y','auto');
    }, 10);
}

})();

解决方案 2

在 web.config 中将文档模式设置为 ie8：

<add name="X-UA-Compatible" value="IE=8"/>

Answer 3

我遇到了同样的问题，我可以通过将以下转换代码添加到固定位置元素 ( transform: translateZ(0);-webkit-transform: translateZ(0);) 来解决它，这会强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞起来。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 FPS）。

注意： translate3d(0,0,0) 对您看到的内容没有任何作用。它在 x、y 和 z 轴上将对象移动 0px。这只是一种强制硬件加速的技术。

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}