文本与 display:table 重叠的容器边框

Question

运行测试，我发现 奇怪的 行为因浏览器而异。我有一个带有边框和相对定位的框，在它里面，我有一些文本绝对定位在容器的左上角，我希望文本 "overlap" 边框（所以它的定位考虑到了边界）。

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

.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 浏览器？）中看起来不同：

哪个表示正确？预期的 behavior/display 应该是多少？

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

文本与 display:table 重叠的容器边框

Text overlapping borders of container with display:table

html

css

webkit

cross-browser