Why "text-align: right" doesn't work on empty contenteditable element in Firefox?

Question

Consider the following: (Live Demo)

HTML:

<div contenteditable></div>

CSS:

div {
  text-align: right;
}

When you click the div in Firefox, the cursor is located at the left (looks like text-align: right; has no effect). But, if you start typing, text-align: right; starts taking effect.

Why is that? Any ideas how to fix this?

Answer 1

This can be achieved using a simple change like this:

<div contenteditable>&nbsp;</div>

We're forcing a blank space in it.

Well if the space matters, I think you have a problem. But I hope this helps :)