IE中的边界半径和RTL问题

我注意到当我使用带填充的border-radius和HTML的方向是RTL时，它不像预期的那样工作。它工作正常，如果删除方向部分dir="rtl"。下面的代码将展示它是如何工作的，并没有与dir="rtl"IE中的边界半径和RTL问题

没有dir="rtl"：

<!DOCTYPE html> 
<html > 
    <head> 
    <title>test</title> 
    </head> 
    <body> 
     <style type="text/css"> 
     .main { 
      padding:5px; 
     } 
     .tag{ 
        background-color: #0473c0; 
        border-radius: 3px 3px 3px 3px; 
        padding:5px; 
      } 
     </style> 
     <div class="main"> 
      <span class="tag">test</span> 
     </div> 

</body> 
</html>

结果： no problem here

与dir="rtl"：

<!DOCTYPE html> 
<html dir="rtl"> 
    <head> 
    <title>test</title> 
    </head> 
    <body> 
     <style type="text/css"> 
     .main { 
      padding:5px; 
     } 
     .tag{ 
        background-color: #0473c0; 
        border-radius: 3px 3px 3px 3px; 
        padding:5px; 
      } 
     </style> 
     <div class="main"> 
      <span class="tag">test</span> 
     </div> 

</body> 
</html>

结果： enter image description here

正如你所看到的文字移动到左边，背景移到了右边。我在IE10和IE9上测试过它。有没有解决这个问题或任何工作？

来源

2013-01-09 usef_ksa

在这里正常工作 – ShibinRagh

我可以重现它。奇怪的问题。它似乎使跨度'内联块'有所帮助，但我不知道它对RTL文档中的文本流是什么。 – Jeroen

使得.tag显示为inline-block似乎解决此问题：

.tag { 
    background-color: #0473c0; 
    border-radius: 3px 3px 3px 3px; 
    padding:5px; 
    display: inline-block; 
    }

也this jsfiddle见的工作演示。（测试IE10，Win8）。

但是，我不确定这是否会以任何方式混淆RTL文档中的文本流。

来源

2013-01-09 12:01:36 Jeroen

它的工作原理，谢谢:) –

IE中的边界半径和RTL问题

回答

相关问题