Question

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

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

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

所以，我的方法是使用负边距来抵消边界宽度的儿童位置。这确实似乎抵消了边界存在的影响，但不幸的是，这种方式并不是在缩放因子之间保持一致的。在大规模，事情看起来不错。在Chrome浏览器的默认浏览器中，元素定位稍微偏离（它们看起来太高）;如果我变小，那么元素位置会向另一个方向移动。

但如果我完全删除边框，布局似乎可以扩展。

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

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

感谢全威 .bordered { 位置：绝对; 身高：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>

CSS边界干扰绝对定位

3 个答案: