Html 解决Chrome中的RTL子级排序问题_Html_Css_Google Chrome_Right To Left

Html 解决Chrome中的RTL子级排序问题

html css google-chrome

Html 解决Chrome中的RTL子级排序问题,html,css,google-chrome,right-to-left,Html,Css,Google Chrome,Right To Left,在下面的MWE中，span和div放在RTL div中，它们的顺序在Firefox中交换，但在Chrome中不交换（不知道它在IE中显示了什么）我需要Firefox的行为，因为span是应该放在文本附近的工具提示的目标。我对web开发还比较陌生，那么最好的方法是什么：使用另一种类型的隐藏元素来锚定工具提示，根据浏览器的不同放置跨度，还是什么为了清楚起见，实际上没有dir=“rtl”属性，但问题出现在阿拉伯语和希伯来语地区。我只是使用了它，这样人们就不需要更改默认语言来进行复制。在我看来，di

在下面的MWE中，span和div放在RTL div中，它们的顺序在Firefox中交换，但在Chrome中不交换（不知道它在IE中显示了什么）

我需要Firefox的行为，因为span是应该放在文本附近的工具提示的目标。我对web开发还比较陌生，那么最好的方法是什么：使用另一种类型的隐藏元素来锚定工具提示，根据浏览器的不同放置跨度，还是什么

为了清楚起见，实际上没有

dir=“rtl”

属性，但问题出现在阿拉伯语和希伯来语地区。我只是使用了它，这样人们就不需要更改默认语言来进行复制。

在我看来，

dir

属性的处理并没有得到很好的指定，这可以解释为什么不同的浏览器处理您的情况不同。我猜想，由于您的

元素是空的，并且由于它保留了

inline

的默认

display

属性，因此它在页面上没有定义维度。Chrome正在进行优化，它不必费心对其应用

rtl

格式。当您将

display

属性更改为

inline block

时，您为

指定了一个高度和宽度，尽管为0。当元素没有定义高度和宽度时，Chrome足够“智能”进行优化，但当元素定义高度和宽度为0时，它不会进行额外的优化。不过，这只是一个猜测

FWIW，我发现CSS

direction

属性比

dir

属性更可靠。

最后，这种情况下最简单的解决方案是使用

而不是

作为第二个元素。仍然不清楚为什么浏览器有不同的属性

将

display:inline block

应用于这两个元素是过分的，但是如果有更多的元素可能需要流经父元素

我猜这与

是块元素，理论上是全宽的，而

是内联的这一事实有关。如果将

的

显示设置为内联块
，会发生什么情况？@StephenThomas，解决了问题！请你解释一下原因，让我接受？另外，为什么浏览器的行为不同，在这种情况下，span的位置是未定义的？
<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:
  ClientRect {left: 700, right: 700, ...}
Chrome:
  ClientRect {left: 8, right: 8, ...}