Chrome 7 对 CSS 百分比相对定位的解释与 Chrome 6（和其他浏览器）不同答案

【问题标题】：Chrome 7 interprets CSS percentage relative positioning differently from Chrome 6 (and other browsers)Chrome 7 对 CSS 百分比相对定位的解释与 Chrome 6（和其他浏览器）不同
【发布时间】：2010-10-21 13:57:05
【问题描述】：

我的 Chrome 安装昨晚自行更新了（没有告诉我也没有问我！）

它现在对 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 渲染中长期存在的不准确问题，还是 Google 将很快修复的 7.x 中的新错误？

注意事项：

如果我取出<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 的行为几乎没有什么相似之处。

【问题讨论】：

标签： css google-chrome webkit

【解决方案1】：

Chrome 7 似乎没有计算绝对定位元素的隐式高度，因为这会起作用：

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 规范中看不到任何内容，所以我认为这是一个“错误”。无论如何，这种方法不好使元素居中^^

【讨论】：