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

Question

我正在尝试呈现一个 HTML 有序列表，其中各个元素需要使用从右到左的文本呈现，而其他元素需要从左到右呈现（例如希伯来语和英语。不，它赢了看起来很棒。）

在 <li> 元素上粘贴 dir="rtl/ltr" 属性使我在 Firefox 中呈现异构呈现，但在 Chrome 中却没有，它总是从左到右（example fiddle ).

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

Answer 1

您应该可以使用以下 CSS:

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

这会给你准确的 the same rendering in FF and chrome

Answer 2

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

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

 li {
        text-align: unset;
    }

勾选Fiddle.