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問題

回答

相關問題