在IE中，fieldset的右侧锯齿状

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

中似乎没问题

如何为所有浏览器/网络浏览器修复它？

编辑 - IE 9 64位版本中出现了此问题

Answer 1

我稍微改进了这个bug ..

 .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

示例：