Question

IE在某些元素上正确显示边框半径时，如果是从右到左的语言，并且在父级上有填充。边界最终会被我假设的父级填充所抵消。设置获得背景的元素display:inline-block;似乎解决了这个问题，但它会导致我不想要的包装问题。这是一个适用于Chrome的小提琴，但在Firefox中看起来很糟糕：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中的一个错误。如果您让孩子跨越p标签，它将正确显示。像这样。

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

IE不能以从右到左的语言正确显示border-radius

1 个答案: