html - ltr 后的 css rtl 不适用于 chrome

Question

这段代码适用于除 chrome 之外的所有浏览器

父div有ltr Angular 色，在有一个方向为rtl的 child ul li之后。

不知何故子方向不能被覆盖并从父方向继承。

<div class="offerVica" id="changeDeal4" style="direction: ltr; height: 78.1052631578947px; max-width: 380px; position: relative;">

                        <ul class="bjqs" style="height: 78.1052631578947px; display: block;">
                            <li class="bjqs-slide" style="height: 78.1052631578947px; width: 371px; direction: rtl !important;">
                                <a href="#" style="direction:rtl">
                                    <div class="vicDate" style="direction: rtl!important;"><span>17</span>-<span>21</span>.<span>8</span>.<span>2014 </span>(<span>first</span>-<span>last</span>)</div>
                                    <div class="price" style="direction:rtl;">example<span>2200 </span></div>
                                    <div class="lastPrice" style="direction:rtl;">1,920 </div>
                                </a>
                            </li>

                        </ul>
                    </div>

这是jsfiddle上的代码

https://jsfiddle.net/wy2f2a74/1/

如您所见，除 chrome 外，大多数浏览器都能很好地渲染它。

知道如何修复 chrome 吗？

Answer 1

用户代理样式表将 text-align 属性添加到 li、a、span 等元素，这包含文本。

将 direction: ltr 添加到父元素时，此 text-align 的值将继承为 left。

所以现在 li 的方向是 rtl，但是它继承了父级的 text-align:left。所以我们需要手动将其设置为right。

如果您检查 ul 标签，用户代理样式表不会将 text-align 属性添加到 ul。因此，将 direction:rtl 应用于 ul 将立即生效。