CSS边界会干扰绝对定位 [英] CSS borders interfering with absolute positioning

问题描述

[edit:澄清了box-sizing:border-box似乎不适用的情况，因为我使用的是绝对定位]

[edit: clarified that box-sizing: border-box doesn't seem applicable, since I'm using absolute positioning]

以下代码说明了我的问题.我使用绝对定位，因为我发现基于流程的布局更加棘手，但我乐于接受建议.我想要的是任意元素周围的边框，没有边框会影响节点的位置. (边框可能会被内容剪切或覆盖，但这没关系.)

The following code illustrates my problem. I'm using absolute positioning, because I found this even trickier with flow-based layout, but I'm open to suggestions. What I want is borders around arbitrary elements, without the borders affecting the positioning of the nodes. (The borders may clip or be overwritten by the content, but that doesn't matter.)

尤其是，父母的边界必须能够与孩子的边界重叠，这不是默认的行为.可以将CSS box-sizing属性设置为border-box来实现我想要的效果，但是(我相信)只能使用内联元素.它对绝对定位的元素没有影响(据我了解).

In particular, the borders of a parent must be able to overlap with the borders of its children, which is not the default behaviour. The CSS box-sizing attribute can be set to border-box to achieve the effect I want, but only (I believe) with inline elements. It has no effect on elements with absolute positioning (as I understand things).

因此，我的方法是使用负边距将孩子的位置偏移边框的宽度.确实，这的确消除了边界存在的影响，但不幸的是，这并非在各个缩放系数上都保持一致.大规模来看，事情看起来还不错.在Chrome浏览器中使用默认的缩放比例时，元素位置略有偏离(它们看起来太高了)；如果我变小，则元素位置朝另一个方向偏离.

So, my approach has been to use a negative margin to offset the positions of the children by the width of the border. This does indeed seem to cancel out the effect of the border's presence, but unfortunately not in a way which is consistent across scaling factors. At large scales, things look ok. At the default browser zoom in Chrome, the element positioning goes a bit off (they appear too high); if I go smaller, then the element position goes off in the other direction.

但是，如果我完全删除边框，则布局似乎可以缩放.

But if I remove the borders entirely, the layout seems to scale ok.

所以我的问题是:是否存在一种可靠的(可缩放的)方法来在HTML元素上设置边框而不影响元素的位置?

So my question is: is there a reliable (scalable) way to have borders on HTML elements with no impact on the positioning of the elements?

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

[In the example, I've used different colours for some of the borders. I would like to see only black, but at some zooms I can see red and green borders, showing that the element's position is being affected by the presence of the border.]

谢谢 罗利 .bordered { 位置:绝对； 高度:18px； 边框:2px实线； 边距:-2px; }

thanks Roly .bordered { position: absolute; height: 18px; border: 2px solid; margin: -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>

推荐答案

尝试CSS2 outline属性:

.bordered {
    outline:2px solid blue;
}

轮廓不会影响元素的位置.

Outline does not affect element position.

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

You can also use CSS3 outline-offset as seen here: http://www.css3.info/preview/outline/

这篇关于CSS边界会干扰绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！