字段集的背景色在IE中超出边界 [英] The fieldset’s background color gets out of border in IE

问题描述

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

The fieldset’s background color gets out of border in IE. I have a table with background color set to blue and the fieldset’s background color set to white. How can I fix this in IE?

我的CSS：

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

我正在动态创建字段集。

I am creating fieldset dynamically.

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

请查看附件（点击放大）

Please see attachment (click to enlarge)

谢谢

推荐答案

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

This is a well-known IE bug, and occurs regardless of whether you use JavaScript to generate the elements or write the HTML yourself.

legend 是 fieldset 的子级，但是由于它位于 fieldset ，IE（错误地）扩展了字段集的背景色，以包含传说。

legend is a child of fieldset, but since it's located slightly "above" the top edge of the fieldset, IE (incorrectly) extends the background color of the fieldset to contain the legend.

一个简单的解决方法是绝对定位传说使其脱离正常的元素流，并手动调整其位置以使其静止通常情况下。还要相对地放置字段集，以使传说保持在附近。

An easy workaround is to absolutely position the legend to take it out of normal element flow, and manually adjust its location so it rests roughly where it normally is. Also position the fieldset relatively so the legend remains in its vicinity.

这样的事情（根据需要调整值）：

Something like this (adjust the values as needed):

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

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

这篇关于字段集的背景色在IE中超出边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！