Chrome 7 interprets CSS percentage relative positioning differently from Chrome 6 (and other browsers)
My Chrome i开发者_运维技巧nstall updated itself last night (without telling or asking me!)
It now interprets CSS percentage relative positioning differently to yesterday. Suppose I have:
<body>
<div class="everything">
<div class="centerMe">
Center me!
</div>
</div>
</body>
And this 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%;
}
In the version of Chrome I had until last night (6.x), and for that matter in Firefox 3.6.10 and IE 8, the Center me! appears roughly in the middle of the page, vertically and horizontally.
But in Chrome 7.0.517.41, it is only centred horizontally. Vertically, it is at the top of the page.
Was this change made deliberately to address a long-standing inaccuracy in CSS rendering, or is it a new bug in 7.x that Google will fix soon?
Notes:
- If I take out the
<div class="centerMe">and corresponding</div>then Chrome 7.x obeys the vertical positioning, but Firefox and IE don't! (i.e. browsers all reverse their behaviour). - If I change the CSS for
.centerMetoposition: absolute;all browsers I've tested behave consistently, centring vertically and horizontally. This makes more sense anyway, so would appear to be the sane workaround for anyone who hits this as a problem. - As always, IE's behaviour is nothing remotely similar unless
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">appears at the start of the HTML.
It seems Chrome 7 doesn't calculate implicit height of an absolute-positionned element, as this will work :
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%;
}
I don't see anything in W3C specifications so I think it's a "bug". Anyway this method is bad to center an element ^^
加载中,请稍侯......
精彩评论