空白に依存しない、contenteditable、子の要素の奇妙な振る舞い？

Question

私はcontenteditableフィールドで遊んでいましたが、私が把握できない奇妙な動きに出くわしました。

この特定の問題についてはfiddleをご覧ください。

私は2つのと同じcontenteditable divsを持っています。どちらも同じ<span>子を持ち、1つの空白文字が続きます（さもなければニンジン問題が発生します）。 2つのdivの唯一の違いは、2番目のdivが "prettified"であり、新しい行に<span>をインデントすることでより読みやすくすることです。

<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contenteditable="false">Something something</span>&#8203;</div> 


<div contenteditable="true"> 
    <span class="lead" contenteditable="false">Something something</span>&#8203; 
</div> 

div要素の両方でこれを試してみてください...その後（すなわち、空白文字の後に）コンテンツの右端に

1. 場所ニンジンを
2. は、バックスペース数回をヒット

あなたはそれが1つの巨大な文字であるかのようにトップ（最初の）contenteditableのdivに、あなたは、<span>要素を削除できることがわかります。また、2番目のdivでは、バックスペーシングがそれをクリアすることはありません。少なくともSafariにはない。

だから何を与える！私はHTMLが空白から独立していると考えました - なぜ2つの動作の違い？

ソースを見ると、彼らは少し異なるマークアップ...

を持っている...しかし、それはまだどんな違いがあることになる理由として私を不可欠な時代。

私はそれを削除可能にしたいので、解決策は明らかに以前のバージョンを使用することですが、なぜこの問題が全く存在するのか不思議です。

また、 contenteditableの指導者になった場合は、別の問題over hereと戦っています。その人の助けを歓迎します！

Answer 1

HTMLは空白に依存しません。代わりに、複数の空白文字は1つのスペース記号と同じものと見なされます。ここの問題はcontenteditableではなく、実際のDOMの変更を美化することです。 this fiddleをチェックしてください、それは問題を示しています。 HTML：

<div class="left"></div> 
<div class="center"></div> 
<div class="right"></div> 

<div style="clear: both;"></div> 

<div class="left"></div><div class="center"></div><div class="right"></div> 

CSS：

.left, .right { width: 25%; } 
.center { width: 50%; } 
.left, .right, .center { display: inline-block; height: 1em; } 
.left { background-color: red; } 
.center { background-color: green; } 
.right { background-color: blue; } 

あなたは何の空白は全くありませんと、「予想通り」、すべての作品ながら、（1つのスペースに等しい）1つの改行はブロック間のいくつかのスペースを作る見ることができるように。

それでも、私は認めざるを得ない、動作がかなり奇妙です：DOMインスペクタが開いているとき、それは

（ここではzero width space character）と私はにカーソルを置く場合（Chromeで）私を示してい終わり、一度バックスペースを打つ、同一のDOM要素（OK、私も余裕を削除しようとしました）を取得：秒で期待どおりに

をしかし、backpaceは動作しません。場合。編集不可能なスパンを削除する唯一の方法は、その後ろに文字を追加し、その前にカーソルを移動して削除することです。 Safari（あなたの言うとおり）とChrome（私のテストによる）の両方に存在しますが、これはバグかもしれません。

これは、ブラウザベンダーのサポートでさらに議論されると思います。ところで、FireFoxでは、これはかなり一貫して動作します：spanはどちらの場合でも削除できません。最初のものは何もありません.2番目のものにはspanの後ろに空白があります（これは、コース）。