Question

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

在有一个带有方向rtl的孩子的ul li之后，父div有ltr角色。

以某种方式，子方向不能覆盖并从父母继承。

<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会立即生效。

Answer 2

直到我从https://css-tricks.com/almanac/properties/d/direction/中学到了，我才能使“ rtl”正常工作：

还有一个特定的HTML标记可用于更改文字方向：<bdo>，双向替代元素。这个存在，因此有一个无语义的元素可用于此目的。

这是我使用的，对我有用：

<bdo dir="rtl">moc.liame@elpmas</bdo>

在ltr没有处理chrome之后的css rtl

2 个答案: