Firefox中的空跨度寬度

Question

我有跨度contenteditable屬性。大部分時間跨度是空的，所以我將固定寬度設置爲跨度。

它適用於Opera和Chrome，我可以點擊跨度和編輯數據。但與Firefox跨度表現就像沒有跨度。

E.g.當Firefox中的跨度爲空時，它不會顯示爲可編輯，我無法點擊它。當只有一個角色出現時，比如空間或其他東西，那麼我可以編輯它。我試圖用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您可以使用一個僞元素給它一些大小或使用:empty僞類，如果有一個由服務器產生HTML中沒有空白時，有沒有要打印的數據。

實施例以下測試：

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>