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

您發布的代碼適用於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; 在元素上。