contenteditable保證金適用於其他絕對定位元素

Question

我有一個contenteditable div，並將另一個絕對定位元素（小方塊）放在它上面。

奇怪的是：在Chrome中，padding-right屬性不斷應用於小方塊，即使它不在CSS中。此外，填充不適用於contenteditable。

• http://jsfiddle.net/xBU7D/

這是Chrome錯誤？我opretty知道我在做正確的事：

<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寬。

你的小格被定位絕對與20px的寬度和左180px導致右側的20px差距 - 但事實並非padding-right。您只需在您的小方塊上將left: 180px更改爲left: 200px，或將您的contenteditable div的width: 180px更改爲width: 160px即可。

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

Answer 2

的padding-right:20px你居然還有讓你200像素CONTENTEDITABLE的div 220px。 因此，如果您將第二個div設置爲200px而不是180px，則它完美地排列起來。

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

Answer 3

接受賀聯的回答作爲一個感謝你們提供了讓我意識到發生了什麼事的解釋。

The real原因我的代碼沒有做我認爲它應該做的事情，是代碼框模型的變化。我與quirksmode.org on that one，content-box的W3C盒子型號對我來說是違反直覺的。 padding應該在內容中。

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