带有显示的容器的文本重叠边框：表

Question

对previous question 运行测试时，我发现了一个奇怪 行为，该行为因浏览器而异。我有一个带有边框和相对定位的框，在其中，我在容器的左上角有一些绝对文本，我希望文本“重叠”边框（因此它的定位考虑到边框)。

blonfu 建议我可以将容器显示设置为表格，这样就可以了。像这样的：

.box {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.box-bordered {
  border:25px solid rgba(0,0,0,0.1);
  display:table;
}

.text {
  position:absolute;
  top:0;
  left:0;
  color:white;
}

<div class="box box-bordered">
  <div class="text">Text</div>
</div>

在 Internet Explorer 或 Firefox 上运行上述代码的结果看起来像我想要的：

但 Safari 或 Chrome（WebKit 浏览器？）中的相同代码看起来不同：

哪一个是正确的？预期的行为/显示应该是什么？

Answer 1

你需要一个外部 div。这是因为边框不被认为是 dom 元素的一部分。所以绝对位置在 html 容器中看起来不包括边框。 Chrome是正确代表它的那个。在 CSS 和 HTML 合规性方面不要相信 IE。

https://jsfiddle.net/L3L6o8ew/1/

<div class="outer">
  <div class="box box-bordered">
    <div class="text">Text</div>
  </div>
</div>

CSS

.outer{
  position: relative;
}

.box {
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.box-bordered {
  border:25px solid rgba(0,0,0,0.1);
  display:table;
}

.text {
  position:absolute;
  top:10px;
  left:10px;
  color:white;
}