Firefoxの空きスパン幅

Question

私はcontenteditableプロパティを持つスパンを持っています。ほとんどの場合、スパンは空ですので、固定幅をスパンに設定します。

OperaとChromeでうまくいきます。スパンをクリックしてデータを編集できます。しかし、Firefoxのスパンは、スパンがないように振る舞います。

など。 Firefoxでスパンが空の場合、編集可能と表示されず、クリックできません。スペースなどの文字が1つしかない場合は、編集することができます。私はhtml文字 でそれを修正しようとしましたが、何もしませんでした。

$comment = ` ` 

<span class="edit_notes" contenteditable=true onFocus="clear_input('.$data['ID'].')" style="min-width: 1200px; display: inline-block;display:-moz-inline-box;" id="comment'.$data['ID'].'" onBlur="changeComment('.$data['ID'].')"> '.$comment.' </span> 

Answer 1

はFFのためにあなたはそれにいくつかのサイズを与えるか、印刷するデータがありませんときに、サーバーによって生成HTMLには空白がない場合:empty疑似クラスを使用する擬似要素を使用することができます。テストするには、以下の

例：ボスのような

span[contenteditable][onFocus]:after, span[contenteditable]:empty { 
 
    content:''; 
 
    padding:0.5em; 
 
    }

<span class="edit_notes" contenteditable=true onFocus="" style="min-width: 1200px; display: inline-block;" id="comment'.$data['ID'].'" onBlur=""> </span> 
 
<hr/> 
 
<span contenteditable=true ></span>