Tại sao "text-align: right" không hoạt động trên phần tử rỗng có thể chỉnh sửa trong Firefox?

Question

Hãy xem xét những điều sau đây: (Live Demo)

HTML:

<div contenteditable></div> 

CSS:

div { 
    text-align: right; 
} 

Khi bạn nhấp vào divtrong Firefox, con trỏ nằm ở bên trái (trông giống như text-align: right; không có hiệu lực). Tuy nhiên, nếu bạn bắt đầu nhập, text-align: right; sẽ bắt đầu có hiệu lực.

Tại sao lại như vậy? Bất kỳ ý tưởng làm thế nào để sửa lỗi này?

Answer 1

này có thể đạt được bằng cách sử dụng thay đổi đơn giản như thế này:

<div contenteditable>&nbsp;</div> 

Chúng tôi đang bắt buộc một không gian trống trong đó.

Nếu không gian quan trọng, tôi nghĩ bạn có vấn đề. Nhưng tôi hy vọng điều này sẽ giúp :)