字段集的背景颜色在 IE 中超出边框答案

【问题标题】：The fieldset’s background color gets out of border in IE字段集的背景颜色在 IE 中超出边框
【发布时间】：2011-04-15 07:33:27
【问题描述】：

字段集的背景颜色在 IE 中超出边框。我有一张表，背景颜色设置为蓝色，字段集的背景颜色设置为白色。如何在 IE 中解决这个问题？

我的 CSS ：

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

我正在动态创建字段集。

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

请看附件（点击放大）

谢谢

【问题讨论】：

您忘记提供 HTML。
好一点，发个截图让我们更容易看到问题
您的 JavaScript 与您的问题无关。您需要使用您的 HTML/CSS 制作一个 jsFiddle 演示，显示您描述的问题："The fieldset’s background color gets out of border in IE"。

标签： css internet-explorer

【解决方案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;
}

【讨论】：