css - 为什么“文本对齐：正确”不适用于 Firefox 中的空 contenteditable 元素？

Question

考虑以下事项：（现场演示）

HTML：

<div contenteditable></div>

CSS：

div {
  text-align: right;
}

当您div 在 Firefox中单击 时，光标位于左侧（看起来text-align: right;没有效果）。但是，如果您开始输入，则text-align: right;开始生效。

这是为什么？任何想法如何解决这一问题？

Answer 1

这可以通过像这样的简单更改来实现：

<div contenteditable>&nbsp;</div>

我们强制在其中留一个空白。

好吧，如果空间很重要，我认为您有问题。但我希望这会有所帮助:)