html - IE 无法在从右到左的语言中正确显示边框半径

Question

当使用从右到左的语言并在父级上填充时，IE 无法在某些元素上正确显示边框半径。边界最终被我假设的父项上的填充所抵消。设置获取背景的元素的 display:inline-block; 似乎可以解决此问题，但它会导致我不想要的包装问题。这是一个在 Chrome 中有效但在 Firefox 中看起来很糟糕的 fiddle :http://jsfiddle.net/u3x0twzg/5/

HTML:

<div dir="rtl">
    <span class="wrapper">
        <span class="border">Here is some text</span>
    </span>
</div>`

CSS:

body {
    background-color:grey;
}

.wrapper {
    display:inline-block;
    padding: 0 10px 0 0;
}

.border {
    background-color:white;
    border-radius:5px;
}

Answer 1

好的，我想我有适合您的解决方案。似乎这是 IE 中的错误。如果你让你的 child 跨入 p 标签，它将正确显示。像这样。

<div dir="rtl">
<span class="wrapper">
    <p class="border">Here is some text</p>
</span>