HTML 中的 RTL 布局错误 - CSS 覆盖不起作用

Question

somehow the CSS overrides (left|right) under dir="rtl" don't seem to work.不知何故，dir="rtl" 下的 CSS 覆盖（左|右）似乎不起作用。

To verigy - in Chrome / Firebug: only when disabling the "left" attribute, the overriding "left" (under .dir_rtl #main_search_wrapper) style starts affecting the actual layout.为了验证 - 在 Chrome / Firebug 中：仅当禁用“left”属性时，覆盖的“left”（在 .dir_rtl #main_search_wrapper 下）样式开始影响实际布局。

Looks like a common browsers bug?看起来像一个常见的浏览器错误？

Here's a live example of the code below: http://jsfiddle.net/DwRLz/这是下面代码的一个活生生的例子： http : //jsfiddle.net/DwRLz/

 #main_search_wrapper { display: inline-block; position: absolute; right: 0; } .dir_rtl #main_search_wrapper { left: 0; /* <-- This should override the above style */ }

 <body class="dir_rtl" dir="rtl"> <div id="main_search_wrapper" style="display: inline-block;"> This should be aligned to the left. </div> </body>

Answer 1

left doesn't necessarily override right , it will use both properties, basically setting them like so: left不一定覆盖right ，它将使用这两个属性，基本上像这样设置它们：

.dir_rtl #main_search_wrapper {
   right: 0;
   left: 0;  /* <-- This wont override the above style */
}

Try this:试试这个：

.dir_rtl #main_search_wrapper {
    right: 0; 
    right: auto;   /* <-- This will override the above style for "right" */
}

Answer 2

Try to use bdo tag if you want to align text left.如果要左对齐文本，请尝试使用bdo标签。

 <bdo dir='rtl'> ךלחיעכגדש(&#x202b;This text will go right-to-left.)ךלחיעכגדשךלחיעכגדשךלחיעכגדש </bdo>

HTML 中的 RTL 布局错误 - CSS 覆盖不起作用

问题描述

2 个解决方案

解决方案1
6 已采纳 2012-01-03 08:07:55

解决方案2
0 2020-01-15 10:42:28

HTML 中的 RTL 布局错误 - CSS 覆盖不起作用

问题描述

2 个解决方案

解决方案1 6 已采纳 2012-01-03 08:07:55

解决方案2 0 2020-01-15 10:42:28

解决方案1
6 已采纳 2012-01-03 08:07:55

解决方案2
0 2020-01-15 10:42:28