Question

我有contenteditable属性。大多数情况下，跨度为空，因此我将固定宽度设置为跨度。

它在Opera和Chrome中运行良好我可以点击范围并编辑数据。但是Firefox的跨度表现就像没有跨度。

E.g。当Firefox中的跨度为空时，它不会显示为可编辑，我无法点击它。当只有一个角色，如空格或其他东西时，我就可以编辑它。我尝试用html字符 修复它，但没有。

$comment = `&nbsp;`

<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伪类。 / p>

以下示例进行测试：

＆＃13;

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

＆＃13;

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

＆＃13;

Firefox中的空跨度宽度

1 个答案: