0

我有一个 contenteditable div，并在它上面放置了另一个绝对定位的元素（一个小框）。

奇怪的事情：在 Chrome 中，该padding-right属性一直应用于小盒子，即使它不在 CSS 中。此外，填充不会应用于 contenteditable。

这是 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;}
4

3 回答 3

2

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

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

您的小 div 绝对定位，其宽度为20px，其左侧180px导致20px右侧有间隙 - 但这不是padding-right. 您只需要更改您的小盒子上的 to 或更改left: 180px您的 contenteditable div的to 。left: 200pxwidth: 180pxwidth: 160px

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

于 2013-04-04T20:40:12.867 回答
1

padding-right:20px你在那里实际上使你的 200px contenteditable div 为 220px 。因此，如果您将第二个 div 设置为左​​侧 200 像素而不是 180 像素，则它会完美排列。

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

于 2013-04-04T20:43:59.597 回答
1

接受 Horen 的回答作为感谢您提供的解释，让我意识到发生了什么。

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

http://jsfiddle.net/xBU7D/4/ 使用border-box，一切都很好。

于 2013-04-04T23:02:10.363 回答