html - contenteditable margin 应用于其他绝对定位元素

Question

我有一个 contenteditable 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 更改为 width: 160px 您的 contenteditable div。

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