Question

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

可能是什么问题？我该如何解决？

Answer 1

在你的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标记内执行它会更清晰。这可能是个人偏好，但它会让它更容易阅读！ :)

IE中的'border-radius'问题

1 个答案: