1

我注意到当我使用带有填充的边界半径并且 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>

结果： 这里没问题

与 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>

结果：在此处输入图像描述

如您所见，文本向左移动，背景向右移动。我在IE10和IE9上测试过。是否有任何解决此问题的方法或任何解决方法？

4

1 回答 1

2

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

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

另请参阅此 jsfiddle以获取工作演示。（在 IE10、Win8 中测试）。

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

于 2013-01-09T12:01:36.237 回答