Chrome，<ul> 从右到左的问题答案

【问题标题】：Chrome, right to left issue with <ul>Chrome，<ul> 从右到左的问题
【发布时间】：2013-03-03 17:14:16
【问题描述】：

我在尝试在 chrome 中设置菜单样式时遇到了一些问题。菜单在 ltr 模式下看起来不错，但在从右到左模式下，它会在 Chrome 中中断。

在 Firefox 中，ltr 中的菜单是“一-二-三”，而 rtl 中是“三-二-一”。它镀铬总是呈现为“一二三”。

知道为什么会发生这种情况，或者我如何在没有第一个“li”跨越整个菜单的情况下设置它的样式？

谢谢，

另外，代码如下：

<!doctype html>
<head>

<style>
.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline;
}
</style>


</head>

<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first"><a href="/fa/blogs" title="">One</a><span id='tail1'>    </span>
<span id='tail2'></span></li>
<li class="menu-1014"><a href="/fa/node/2" title="">Two</a><span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active"><a href="/fa/projects" class="active-trail active">Three</a><span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>

</html>

【问题讨论】：

您可以检查 LTR 兼容性表以查看 Chrome 是否滞后，但我对此表示怀疑……您确定这是使用 LTR 的正确方法吗？（我不知道）
将 ul.inline li 更改为 display: inline-block 似乎可以解决问题，但我无法告诉您原因
我认为可能是元素没有重新排序，因为它们不是块。显然，rtl 只改变块和表的流程。我想这是因为 chrome 很严格，而 firefox 很随和..
刚刚看到这个有一个 rtl span 后跟一个 ltr span，将第二个 span 切换为 p 解决了这个问题。 W3c 似乎没有建议这种行为w3.org/TR/i18n-html-tech-bidi/#ri20030218.135304584
chrome 错误，刚刚遇到了一个问题，即 ul 内部的 rtl 行为与外部不同，并且它在 Edge 上运行良好，这意味着它是一个罕见的 chrome 错误。虽然 6 年后：/

标签： css google-chrome right-to-left

【解决方案1】：

我认为这是最简单的方法 - 你应该做你的两个：

ul, li 
{
direction:rtl;
}

【讨论】：

【解决方案2】：

试试这个：

.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline-block;
}

【讨论】：