Html 固定元素消失在Internet Explorer 9中

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

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

这个JSFIDLE演示了我的问题：

---

z索引元素的父元素未定位。 您必须添加到表

位置：inherit
因此，表的css将是：

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

这对我有用

解决方案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"/>

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

使用-webkit转换：translate3d（0,0,0）；将启动GPU进行CSS转换，使其更平滑（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*/
}

真不敢相信这么容易，我爱你！
#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*/
}