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ように見えます。

はpadding-rightcontenteditable div の幅に追加され、幅が220px広くなります。

あなたの小さな div は の幅で絶対的に配置され、その20px左は右のギャップに180pxつながりますが、それは. 小さなボックスの to を変更するか、contenteditable divのtoを変更するだけです。20pxpadding-rightleft: 180pxleft: 200pxwidth: 180pxwidth: 160px

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

于 2013-04-04T20:40:12.867 に答える
1

実際には、200pxのpadding-right:20pxcontenteditable div が 220px になります。したがって、2 番目の div を 180px ではなく 200px に設定すると、完全に整列します。

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

于 2013-04-04T20:43:59.597 に答える
1

ホーレンの答えを受け入れて、何が起こっているのかを理解させてくれた説明を提供してくれてありがとう.

私のコードが本来あるべきことを実行しなかった本当の理由は、くそったれのボックス モデルの変更です。私はその quirksmode.org を使用していますが、W3C ボックス モデルはcontent-box直感に反しています。paddingコンテンツの中にあるはずです。

http://jsfiddle.net/xBU7D/4/ を使用してborder-boxおり、すべて順調です。

于 2013-04-04T23:02:10.363 に答える