Question

在下面的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将跨度放在div的右侧，而Chrome则将其保留在左侧。（控制台中显示的确切值取决于您的屏幕尺寸。）

Firefox:
  ClientRect {left: 700, right: 700, ...}
Chrome:
  ClientRect {left: 8, right: 8, ...}

我需要Firefox行为，因为跨度是应该放在文本附近的工具提示的目标。我对Web开发还不熟悉，那么最好的方法是什么：使用其他类型的隐藏元素来锚定工具提示，根据浏览器的不同放置跨度，或者是什么？

为了清楚起见，事实上没有dir="rtl"属性，但问题显示在阿拉伯语和希伯来语语言环境中。我刚刚使用它，所以人们不需要改变他们的默认语言来重现。

Answer 1

在我看来，dir属性的处理并没有特别明确，这可以解释为什么不同的浏览器会以不同的方式处理您的情况。我猜测，因为您的<span>元素为空，并且由于它保留了display的默认inline属性，因此页面上没有定义的维度。 Chrome正在优化，只是不打算将rtl格式应用于它。当您将display属性更改为inline-block时，您会给<span>一个高度和宽度，尽管是0. Chrome很“智能”，足以在元素没有高度时进行优化宽度定义，但是当元素具有定义的高度和宽度0时，它不会进行额外的优化步骤。但这只是猜测。

FWIW，我发现CSS direction属性比dir属性更可靠。

Answer 2

最后，对于这种情况，最简单的解决方案是使用<span>而不是<div>作为第二个元素。仍然不清楚为什么浏览器具有不同的属性。

将display:inline-block应用于这两个元素是过度的，但如果有更多元素可能需要流经父<div>，则可能是必要的。

解决在Chrome中订购的RTL儿童问题

2 个答案: