使用display：table

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;
}