LTR后无法在chrome上使用的CSS rtl [英] css rtl after ltr not working on chrome

问题描述

这段代码可以在除chrome之外的所有浏览器上正常工作

This piece of code work right on all browser except chrome

在有一个方向为rtl的孩子的ul li之后，父div扮演了ltr的角色.

the parent div has ltr role, after there is a childrens ul li with direction rtl.

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

somehow the child direction can't be override and inherit from the parent.

<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上的代码

this is the code on jsfiddle

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

如您所见，大多数浏览器都将其渲染为chrome除外.

as you can see most browser render it fine except chrome.

您知道如何在Chrome上进行修复吗?

any idea how to fix on chrome?

推荐答案

用户代理样式表将 text-align 属性添加到诸如 li ， a ， span ，其中包含文本.

The user agent stylesheet adds text-align property to elements like li, a, span, which contain text.

将 direction:ltr 添加到父元素时，此文本对齐方式的值将继承为 left .

When adding direction: ltr to a parent element, the value for this text-align is inherited as left.

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

So now the direction for li is rtl, but it inherits text-align:left from parent. So we need to set it manually to right.

如果选中 ul 标记，则用户代理样式表不会将 text-align 属性添加到 ul .因此，将 direction:rtl 应用于 ul 即可立即生效.

If you check the ul tag, the user agent stylesheet does not add the text-align property to the ul. So applying direction:rtl to ul will work instantly.

这篇关于LTR后无法在chrome上使用的CSS rtl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！