代码之家 › 专栏 › 技术社区 › Daniel Earwicker

Chrome7与Chrome6(和其他浏览器)解释CSS相对位置的百分比不同。

webkit google-chrome css

Daniel Earwicker · 技术社区 · 15 年前

我的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),在火狐3.6.10和IE8中,这个版本 Center me! 大致出现在页面中间, 垂直和水平 .

但在Chrome7.0.517.41中,它只是水平居中。垂直,它在页面的顶部。

这一更改是为了解决CSS呈现中长期存在的不精确性,还是谷歌将很快修复7.x中的一个新bug?

笔记:

如果我拿出 <div class="centerMe"> 和相应的 </div> 然后chrome 7.x服从垂直定位,但firefox和ie不服从!(即浏览器都会改变它们的行为)。
如果我将CSS更改为 .centerMe 到 position: absolute; 我测试过的所有浏览器的行为都是一致的,垂直和水平居中。不管怎么说,这更有意义,所以对于任何把这当成问题的人来说,这似乎都是明智的解决办法。
和往常一样,Ie的行为与以前完全不同,除非 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 显示在HTML开头。

1 回复 | 直到 15 年前

MatTheCat 15 年前

Chrome7似乎没有计算绝对位置元素的隐式高度,因为这样可以:

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规范中没有看到任何东西,所以我认为这是一个“bug”。无论如何,此方法不适合将元素居中^^

推荐文章

Bob · 检查UIWebView是否已在Swift中加载完毕

8 年前

Laust Deleuran · Canvas createRadialGradient()在Chrome v65中未按预期工作

8 年前

CodeGeekBot · Xcode 9.2-WebView不工作

8 年前

Mario Burga · 如何在webkit视图中显示url

8 年前

Stefan Orzu · 在Chrome中按字体大小和字体样式重置OpenType设置

8 年前

ch1maera · 在Swift、WKWebView中遍历JavaScript元素

8 年前

Pasha Skender Bergi · JFX Webview post JAVA 1.8.0_121变得更糟

8 年前

Herel Adrastel · 不推荐使用的方法是否由最新的API执行?

10 年前

Sergey · Google Chrome开发工具启动非常缓慢

10 年前

André Hikaru · 悬停时模糊/取消模糊2种不同背景

10 年前