Question

它的作用基本上是渲染右上角和右下角，而不是正确的顶部+左下角。

这是css：

.formlabel, .formlabel2, .formhead{
    width:200px;
    font-size:18px;
    height:22px;
    font-weight:normal;
    background-color:#FF8000;
    text-align:right;
    margin-top:5px;
    padding-right:1px;
    border:none;
    color:white;    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

从我能够推断的情况来看，它发生的原因是它们位于具有direction:rtl属性的另一个类中。如果我将direction:ltr添加到上面的类中，则角正确舍入。（您可以使用上面的代码并添加direction:rtl）

来尝试此操作

问题是该网站是希伯来语所以我需要它保持rtl。

有什么想法吗？

Answer 1

我原本以为一个简单的解决方案是在IE9 +的<head>中添加一个条件注释来使用已经反转的css。

<!--[if gte IE 9]>
    <style>
        .formlabel, .formlabel2, .formhead{
            border-top-right-radius: 5px; /* switched from left */
            border-bottom-right-radius: 5px; /* switched from left */
        }
    </style>
<![endif]-->

如果您愿意，可以在条件注释中使用style，而不是链接到单独的外部样式表。

Internet Explorer 9（和10）向后渲染圆角

1 个答案: