Question

我的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渲染中长期存在的不准确问题，还是谷歌即将修复的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的行为并不是很相似。

Answer 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规范中没有看到任何内容，因此我认为这是一个“错误”。无论如何，这种方法很难将元素集中在一起^^

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

1 个答案: