在下面的 MWE 中，一个 span 和一个 div 被放置在一个 RTL div 中，它们的顺序在 Firefox 中交换但在 Chrome 中不交换(不知道它在 IE 中显示什么...)。
<html>
<body>
<div dir="rtl">
<span id="empty-span"></span>
<div>This is arabic!</div>
</div>
<script>
var anchorEl = document.getElementById('empty-span');
var anchorRect = anchorEl.getBoundingClientRect();
console.log(anchorRect);
</script>
</body>
</html>
Firefox 将 span 放在 div 的右侧，而 Chrome 将其放在左侧。 (控制台中显示的确切值取决于您的屏幕尺寸。)
Firefox:
ClientRect {left: 700, right: 700, ...}
Chrome:
ClientRect {left: 8, right: 8, ...}
我需要 Firefox 的行为，因为 span 是应该放在文本附近的工具提示的目标。我是 Web 开发的新手，那么最好的方法是什么:使用另一种类型的隐藏元素来锚定工具提示，根据浏览器放置不同的跨度，或者什么？
为清楚起见，实际上没有 dir="rtl" 属性，但问题显示在阿拉伯语和希伯来语区域设置中。我只是使用它，这样人们就不需要更改他们的默认语言来重现。
最佳答案
在我看来，处理 dir属性没有特别明确，这可以解释为什么不同的浏览器以不同的方式处理您的情况。我猜是因为你的 <span>元素是空的，因为它保留了默认值 display inline的属性(property)，它在页面上没有定义尺寸。 Chrome 正在通过简单地不费心应用 rtl 来进行优化。格式化它。当您更改 display属性(property)inline-block ，你给了 <span>一个高度和宽度，尽管是 0。当元素没有定义高度和宽度时，Chrome 足够“智能”以进行优化，但是当元素具有定义的高度和宽度为 0 时，它不会进行额外的优化步骤。那是不过，这只是一个猜测。
FWIW，我找到了 CSS direction属性比 dir 更可靠属性。
关于html - 解决 Chrome 中的 RTL children ordering，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21295764/