Internet Explorer 9（和 10）正在向后渲染我的圆角答案

【问题标题】：Internet Explorer 9 (and 10) are rendering my rounded corners backwardsInternet Explorer 9（和 10）正在向后渲染我的圆角
【发布时间】：2011-09-11 20:35:22
【问题描述】：

基本上它的作用是将右上角和右下角渲染成圆形，而不是正确的上+左下角。

这是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。

有什么想法吗？

【问题讨论】：

愚蠢的愚蠢 IE 开发者。时不时地稍微顺从一下就好了。
也许你可以使用绝对定位来堆叠两个元素，然后把背景和边框和方向：ltr 放到下面的元素上，把所有的 rtl 内容放在上面的元素上？

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

【解决方案1】：

我认为一个简单的解决方案是在<head> 中放置一个条件注释，以便 IE9+ 使用您已反转的 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。

【讨论】：

IE10 不再支持条件 cmets。
@duri：这很有趣。虽然它仍然适用于 IE9，但希望在 IE10 完成时它会得到纠正，假设有人通知他们这个问题。
@jontsef：正如我最初的想法，已经在 IE10 中测试过这个 bug 已经修复，所以上面的条件语句将适用于 IE9。因此问题解决了:)