Question

我有一个满足的div，并在其上放置了另一个绝对定位的元素（一个小盒子）。

奇怪的是：在Chrome中，padding-right属性不断应用于小方框，即使它不在CSS中。此外，填充不适用于contenteditable。

的 http://jsfiddle.net/xBU7D/

这是Chrome的错误吗？我很确定我做得对：

<div contenteditable=true>hello</div>
<div id=closer></div>

和

   div[contenteditable] {
        border:1px solid #900;
        width:200px;  
        overflow:hidden;
        white-space:nowrap;
        padding-right:20px; /* <- the wascawwy wabbit */
    }
    #closer {
        position:absolute;
        border:1px solid #090;
        width:20px;
        height:20px;
        top:0px;
        left:180px;
    }
    body {padding:0;margin:0;}

Answer 1

padding-right实际上没有应用于它看起来像它的小盒子。

padding-right会增加您的contenteditable div的宽度，使其220px宽。

您的小div位于绝对位置，宽度为20px，左侧为180px，这导致右侧有20px个间隙 - 但这不是padding-right。您只需将小方框中的left: 180px更改为left: 200px，或将width: 180px更改为您可信任的div的width: 160px。

http://jsfiddle.net/xBU7D/2/

Answer 2

你拥有的padding-right:20px实际上使你的200px contenteditable div 220px。所以，如果你把你的第二个div 200px设置为左边而不是180px，它就会很好地排列。

http://jsfiddle.net/xBU7D/3/

Answer 3

接受Horen的回答，谢谢你提供的解释让我意识到正在发生的事情。

真正的原因我的代码没有做我认为它应该做的事情，是更改的模型盒模型。我在quirksmode.org on that one，content-box的W3C盒子模型对我来说是违反直觉的。 padding应该在内容中。

http://jsfiddle.net/xBU7D/4/使用border-box，一切顺利。

可信边际适用于其他绝对定位元素

3 个答案: