可满足页边距应用于其他绝对位置的元素

Question

我有一个可满足内容的div，并在它的顶部放置另一个绝对定位元素(一个小框)。

奇怪的事情:在Chrome中，padding-right属性一直应用于小框，即使它不在CSS中。此外，填充符不应用于。

• http://jsfiddle.net/xBU7D/

这是一个Chrome bug吗?我很确定我做的是对的:

<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增加了你的可满足div的宽度，使它成为220px宽。

你的小div是绝对定位的宽度为20px和180px的左边，这导致20px的间隙在右边-但这不是padding-right。你只需要改变你的小框的left: 180px为left: 200px或改变width: 180px为width: 160px的可满足的div。

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

Answer 2

你在那里的padding-right:20px实际上使你的200px可内容div 220px。所以，如果你把第二个div的左距设置为200px而不是180px，它就会对齐得很好。

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

Answer 3

接受Horen的回答，感谢他的解释让我意识到发生了什么。

真正的原因是我的代码没有做我认为它应该做的事情，是该死的盒子模型改变。我同意quirksmode.org的观点，content-box的W3C盒子模型对我来说是反直觉的。padding应该在内容里面

http://jsfiddle.net/xBU7D/4/使用border-box，一切正常