html - IE9反向css中的边框半径

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

The code you posted works for me in IE9. Therefore, it could be a specificity error. A quick way to test is to add !important to the end of each of your style declarations. The better way to check is to press F12, find the element you're interested in on the left, then click Trace Styles on the right. Make sure the browser is applying the styles you entered. If it is not, click the plus buttons beside the CSS properties to determine where the style assignments are coming from.

Or you can try:

-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;元素。