Question

我注意到当我使用带填充的border-radius时，HTML的方向是RTL，它没有按预期工作。如果删除方向部分dir="rtl"，它可以正常工作。以下代码将显示没有dir="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上测试过它。有没有解决这个问题或任何解决方法？

Answer 1

将.tag显示为inline-block似乎可以解决此问题：

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

另请参阅this jsfiddle了解工作演示。（在IE10，Win8中测试过。）

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

IE中的border-radius和RTL问题

1 个答案: