0

IE9の「border-radius」に問題があります（他のIEのバージョンでは試していません）。

問題の画像：http：
//imageshack.us/a/img171/4060/ieproblem11.png

そして、同じ部分がChrome / Firefox / Android/などでどのように見えるか
。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;
}

何が問題になる可能性がありますか？そして、どうすればそれを修正できますか？

4

1 に答える 1

0

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;
}

すでにスタイルシートが添付されている場合は、htmlタグ内で行うよりも、すべてを.cssファイルに入れる方がクリーンです。それは個人的な好みかもしれませんが、読みやすくなります！:)

于 2013-02-15T18:37:10.203 に答える