CSS边框干扰绝对定位

Question

[编辑：澄清 box-sizing:border-box 似乎不适用，因为我使用的是绝对定位]

以下代码说明了我的问题。我正在使用绝对定位，因为我发现这对于基于流的布局更加棘手，但我愿意接受建议。我想要的是任意元素周围的边框，没有影响节点定位的边框。 （边框可能会被内容剪切或覆盖，但这并不重要。）

特别是，父项的边框必须能够与其子项的边框重叠，这不是默认行为。 CSS box-sizing 属性可以设置为border-box 来实现我想要的效果，但只能（我相信）使用内联元素。它对具有绝对定位的元素没有影响（据我了解）。

因此，我的方法是使用负边距将子项的位置偏移边框的宽度。这似乎确实抵消了边界存在的影响，但不幸的是，在比例因子上并不是一致的。在大尺度上，事情看起来还不错。在 Chrome 的默认浏览器缩放中，元素定位有点偏离（它们看起来太高了）；如果我变小，那么元素位置就会向另一个方向偏移。

但如果我完全删除边框，布局似乎可以正常缩放。

所以我的问题是：是否有可靠（可扩展）的方式在 HTML 元素上设置边框而不影响元素的定位？

[在示例中，我为某些边框使用了不同的颜色。我只想看到黑色，但在某些缩放中我可以看到红色和绿色边框，这表明元素的位置受到边框存在的影响。]

谢谢 罗利 .边框{ 位置：绝对； 高度：18px； 边框：2px 实心； 边距：-2px； }

<span class="bordered" style="width: 55px; left: 30px;">
  <span class="bordered" style="width: 8px; left: 0;">
    (
  </span>
  <span class="bordered" style="border-color: green; width: 47px; left: 8px;">
    <span class="bordered" style="border-color: red; width: 39px; left: 0;">
      <span class="bordered" style="width: 8px; left: 0;">
        5
      </span>
      <span class="bordered" style="width: 31px; left: 8px;">
        <span class="bordered" style="width: 23px; left: 8px;">
          Nil
        </span>
      </span>
    </span>
    <span class="bordered" style="width: 8px; left: 39px;">
      )
    </span>
   </span>
 </span>

Answer 1

试用 CSS2 outline 属性：

.bordered {
    outline:2px solid blue;
}

轮廓不影响元素位置。

您也可以使用 CSS3 outline-offset，如下所示：http://www.css3.info/preview/outline/

Answer 2

我还发现使用宽度为零的边框（这样它不会影响布局），然后添加一个盒子阴影来模拟可见边框，似乎效果很好。

Answer 3

六年后……

其他答案不适用于我的情况，因为我正在设计的盒子已经有一个盒子阴影。我需要像border-left 和border-radius 这样的边框，但边框不影响元素的位置或宽度。我想出的解决方案是在绝对定位元素的内部元素上应用边框。

.outer {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background-color: #c8c8c8;
}

.inner {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border-left: solid 5px #097fee;
    border-radius: 5px;
}

<div class="outer">
  <div class="inner">
    Some content
  </div>
</div>