的Chrome 7解釋不同的Chrome 6（和其他瀏覽器），CSS百分比相對定位

我的Chrome安裝昨晚更新本身（沒有告訴或者問我！）的Chrome 7解釋不同的Chrome 6（和其他瀏覽器），CSS百分比相對定位

現在解釋CSS百分比相對定位不同的昨天。假設我有：

<body> 
    <div class="everything"> 
    <div class="centerMe"> 
     Center me! 
    </div> 
    </div> 
</body>

而這個CSS：

body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

.everything 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
} 

.centerMe 
{ 
    position: relative; 
    top: 50%; 
    left: 50%; 
}

在Chrome中的版本我直到昨晚（6.x中），並在Firefox 3.6.10和IE 8此事，Center me!大致出現在頁面中間，縱向和橫向。

但是在Chrome 7.0.517.41中，它只是水平居中。垂直方向，它位於頁面的頂部。

此更改是故意爲了解決CSS渲染中長期存在的不準確問題嗎？或者它是否爲7.x中的一個新bug，Google即將修復？

注：

如果我拿出<div class="centerMe">和相應的</div>之後，Chrome 7.x的服從垂直定位，但Firefox和IE都沒有！（即瀏覽器都會顛倒他們的行爲）。
如果我將.centerMe的CSS更改爲position: absolute;我測試過的所有瀏覽器的行爲一致，垂直和水平居中。無論如何，這樣做更有意義，因此對於任何將此作爲問題的人來說，這似乎是一個理智的解決方法。
與往常一樣，除非<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">出現在HTML的開頭，否則IE的行爲沒有任何相似之處。

來源

2010-10-21 Daniel Earwicker

看來Chrome的7不計算絕對positionned元素的隱含高度，這將工作：

body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

.everything 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    height:100%; /* fix height */ 
} 

.centerMe 
{ 
    position: relative; 
    top: 50%; 
    left: 50%; 
}

我看不到任何東西在W3C規範，所以我認爲這是一個「蟲」。無論如何，這種方法是不好的中心元素^^

來源

2010-10-21 14:43:41 MatTheCat

的Chrome 7解釋不同的Chrome 6（和其他瀏覽器），CSS百分比相對定位

回答

相關問題