Question

解释我的问题的最好方法是使用图片..

在Chrome，Firefox和Safari中就是这样：

http://i.stack.imgur.com/Zm2QY.png

在IE9中，这就是它的外观：

http://i.stack.imgur.com/V9bVG.png

这是我的CSS：

border: 0px solid #777777;
background: url("../image/shop.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
font: bold 0px 'Trebuchet MS';
padding: 23px 0px;

-moz-border-radius: 0px 0px 0px 13px;
-webkit-border-radius: 0px 0px 0px 13px;
-khtml-border-radius: 0px 0px 0px 13px;
border-radius: 0px 0px 0px 13px;
float: left;
width: 57px;

知道发生了什么事吗？请帮帮我..

Answer 1

您发布的代码在IE9中为我工作。因此，它可能是特异性错误。一种快速测试方法是在每个样式声明的末尾添加!important。更好的检查方法是按F12，在左侧找到您感兴趣的元素，然后单击右侧的“跟踪样式”。确保浏览器正在应用您输入的样式。如果不是，请单击CSS属性旁边的加号按钮以确定样式分配的来源。

或者您可以尝试：

-webkit-border-bottom-left-radius: 13px;
-moz-border-radius-bottomleft: 13px;
border-bottom-left-radius: 13px;

Answer 2

这是IE9中的一个错误，当元素具有direction: rtl;时（直接在具有border-radius的元素上或从该元素的父元素继承）。

解决方案是在元素上应用direction: ltr;。

IE9中的border-radius反向css

2 个答案: