IE中的'border-radius'問題

我在IE9中有一個「border-radius」的問題（我還沒有在其他IE版本中試過）。IE中的'border-radius'問題

問題的圖片：
http://imageshack.us/a/img171/4060/ieproblem11.png

以及如何同一部分看起來在Chrome /火狐/安卓/等
http://imageshack.us/a/img837/3730/ieproblem12.png

的HTML部分：

<div style="margin-bottom: 10px;"> 
    <div class="console-background" style="float: right; width: 80px; font-size: 16px; padding: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-left: 1px solid #ffffff; border-bottom: 1px solid #dddddd; color: #ffffff; font-weight: bold;"> 
     PC 
    </div> 
    <div class="gray-title" style="float: right; width: 579px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; font-weight: bold; font-size: 16px;"> 
     Title 
    </div> 
    <div class="clear"></div> 
</div>

CSS ：

.console-background { 
    background-color: #2599cf; 
} 

.gray-title { 
    background-color: #efefef; 
    border-bottom: 1px solid #dddddd; 
    padding: 10px; 
    border-radius: 10px; 
    color: #555555; 
    font-size: 14px; 
}

可能是什麼問題？我該如何解決它？

來源

2013-01-31 Michael Becker

我用Windows 7上的Internet Explorer 9的確切代碼和邊界半徑工作正常。 – Nick

在你的CSS中，你有border-radius：10px;將所有角落設置爲10px。在HTML中，你有一個指定到底部和右上角的樣式，我相信這是你想要的樣子。試着改變你的CSS：

.gray-title 
{ 
background-color: #efefef; 
border-bottom: 1px solid #dddddd; 
padding: 10px; 
border-top-right-radius: 0px; 
border-bottom-right-radius: 0px; 
color: #555555; 
font-size: 14px; 
}

如果你已經有一個附加的樣式表，這將是清潔劑把它所有的.css文件，而不是做它的HTML標籤內。這可能是個人偏好，但它會使閱讀更容易！ :)

來源

2013-02-15 18:37:10 Jen

IE中的'border-radius'問題

回答

相關問題