在 Chrome 中的单个列表元素上设置 HTML dir 属性

Question

我正在尝试呈现一个 HTML 有序列表，其中单个元素需要以从右到左的文本和其他从左到右的文本呈现（例如希伯来语和英语。不，它看起来不太好。）

在<li> 元素上添加dir="rtl/ltr" 属性可以让我在Firefox 中进行异构渲染，但在Chrome 中却不行，它总是从左到右(example fiddle)。

除了放弃<div>s 的列表元素（根据需要工作）之外，有什么方法可以在这里实现跨浏览器的一致性。

Answer 1

这是因为chrome会默认设置text-align: -webkit-match-parent;

在 css 中添加以下内容将解决您的问题。

 li {
        text-align: unset;
    }

查看Fiddle.

Answer 2

您应该能够使用以下 CSS：

li[dir=rtl]{
    direction: rtl;
    unicode-bidi: bidi-override; 
    text-align:right;
}

这将为您提供准确的the same rendering in FF and chrome