html - IE 中字段集的右侧呈锯齿状

Question

我有以下HTML：

<div class="body-content">
    <fieldset class="EntryFieldSet">
        <legend id="ScreeningTitle"> Screening:</legend>
        <br/><br/>
    </fieldset>
</div>

以及以下CSS：

.body-content {
    width: 300px;
    border: 1px solid black;
    background-color: #F5F5F5 /*whitesmoke*/;
}
.EntryFieldSet {
    width: 250px;
    padding-left: 15px;
    overflow: hidden;
}

jsFiddle

在Internet Explorer中，右侧是锯齿状的

但它在Chrome中看起来很好

如何为所有浏览器/ Internet Explorer 修复它？

编辑- 这个问题在 IE 9 64 位版本中发生在我身上

Answer 1

我已经稍微改进了这个错误..

 .EntryFieldSet {
        width: 250px;
        padding-left: 15px;
        overflow: hidden;
        border-top-right-radius: 3px;
        -webkit-top-right-radius: 3px;
        -moz-border-top-right-radius: 3px;
        border-top-right-radius: 0px\9;
        border-top-right-radius: 0px\0/;

    }

Answer 2

我认为最好的方法是覆盖默认的 css。这对我有用

.EntryFieldSet {
   border-radius: 0px;
   -moz-border-radius: 0px;
   border: solid 1px darkgray;
}

这样，它在所有浏览器中以相同的颜色统一显示

jsFiddle

Answer 3

通过对字段集应用零border-radius，我能够让它停止尝试默认浏览器应用一个，所以现在它可以正确呈现

.EntryFieldSet {
    /* other properties */
    -moz-border-radius: 0px;
         border-radius: 0px;
}

jsFiddle

例子：