IE顯示後的DOM元素轉化

我用在不同的地方下面的CSS我的網站上水平滾動條：IE顯示後的DOM元素轉化

.a { 
    position:absolute; 
    background:red; 
    width:600px; 
    height:100px; 
    left:50%; 
    transform: translate(-50%); 
}

當Internet Explorer中運行，你會發現一個水平滾動條似乎忽略了關於頁面總寬度的轉換。

來源

2015-01-16 hedgehog90

我在IE團隊工作，最近在這個行爲上提出了一個錯誤。此外，[我推送了受影響的網站]（https://twitter.com/jonathansampson/status/535521595565961216），以試圖瞭解此錯誤的影響。你有一個受此影響的現場網站？如果是這樣，它將幫助我們理解修復的緊迫性。 – Sampson

不幸的是，它還沒有生活，但jsfiddle清楚地證明了它。 – hedgehog90

有一個簡單的解決方案：

http://jsfiddle.net/uycq29mt/2/

.a { 
    position:absolute; 
    background:red; 
    width:600px; 
    height:100px; 
    right:50%; 
    transform: translate(50%); 
}

而不是發送該元件的左50％（向右），並使用變換來發送它左，我正好相反。直到現在我從來沒有考慮過它，但是如果你將一個元素定位到最左邊，它不會影響頁面寬度或滾動條。奇怪的是，如果通過使用頂部50％和平移（0px，-50％）來進行垂直居中對齊，它似乎不會影響垂直滾動條。

只有當以這種方式使用轉換時，Internet Explorer纔會重新計算水平邊界。很煩人。 IE糟透了。

來源

2015-01-16 18:23:03 hedgehog90

我已經遇到了垂直居中問題，實際上也是這樣，這就是我在這裏帶來的 - http://jsfiddle.net/uycq29mt/12/同樣的解決方案似乎在那裏工作 - http://jsfiddle.net/ uycq29mt/13 / – launchoverit

IE顯示後的DOM元素轉化

回答

相關問題