0

我在 IE9 中遇到了“边界半径”的问题（我没有在其他 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;
}

如果您已经有一个附加的样式表，将它全部放在 .css 文件中而不是在 html 标记中执行它会更干净。这可能是个人喜好，但它会更容易阅读！:)

于 2013-02-15T18:37:10.203 回答