在IE中,fieldset的背景颜色超出了边框

Question

在IE中,fieldset的背景颜色超出了边框.我有一个表格,背景颜色设置为蓝色,字段集的背景颜色设置为白色.我怎样才能在IE中解决这个问题？

我的CSS:

fieldset {margin:10px;}         
fieldset legend {font-size: 14px; font-style:normal;}

我正在动态创建fieldset.

newFieldset = document.createElement('fieldset');
newLegend = document.createElement('legend');
newLegend.innerHTML = 'Claimant Information';
newFieldset.appendChild(newLegend);
OverdueReportsSummaryDetailsTableDiv.appendChild(newFieldset);  

请看附件(点击放大)

谢谢

Answer 1

这是一个众所周知的IE错误,无论您是使用JavaScript生成元素还是自己编写HTML,都会发生这种错误.

legend是一个孩子fieldset,但由于它位于上边缘稍微"上方" fieldset,IE(错误地)扩展了fieldset包含的背景颜色legend.

一个简单的解决方法是绝对定位,legend使其脱离正常的元素流,并手动调整其位置,使其大致位于通常的位置.同样fieldset将legend遗体定位在其附近.

像这样的东西(根据需要调整值):

fieldset {
    position: relative;
    margin: 10px;
}

fieldset legend {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
    font-size: 14px;
    font-style: normal;
}