修復了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);強制transform: translateZ(0);-webkit-transform: translateZ(0); ）硬件加速訪問設備的圖形處理單元（GPU），以使像素飛行。 另一方面，Web應用程序在瀏覽器的上下文中運行，這使軟件可以完成大部分（如果不是全部）渲染，從而降低了轉換所需的功能。 但是Web一直在追趕，大多數瀏覽器供應商現在都通過特定的CSS規則提供圖形硬件加速。

使用-webkit-transform：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*/
}