IE 中的边界半径和 RTL 问题答案

【问题标题】：border-radius and RTL issue in IEIE 中的边界半径和 RTL 问题
【发布时间】：2013-01-09 11:47:26
【问题描述】：

我注意到当我使用带有填充的边界半径并且 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上测试过。是否有任何解决此问题的方法或任何解决方法？

【问题讨论】：

我可以复制它。奇怪的问题。似乎将跨度设为inline-block 会有所帮助，但我不确定它对 RTL 文档中的文本流有何影响。

标签： html internet-explorer css right-to-left

【解决方案1】：

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

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

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

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

【讨论】：