CSS边界干扰绝对定位

Question

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

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

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

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

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

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

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

谢谢Roly .bordered {position:absolute; 身高: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

我还发现,使用零宽度的边框(使其不影响布局),然后添加的box-shadow来模拟一个可见的边框,似乎运作良好.