Блог

Главная - Вопросы по программированию - Цвет фона набора полей выходит за рамки в IE

Цвет фона набора полей выходит за рамки в IE

#css #internet-explorer

#css #internet-explorer

Вопрос:

Цвет фона набора полей выходит за рамки в 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);

Пожалуйста, смотрите вложение (нажмите, чтобы увеличить)

Спасибо

Комментарии:

1. Вы забыли указать свой HTML-код.

2. еще один шаг, разместите скриншот, чтобы нам было легче увидеть проблему

3. Ваш JavaScript не имеет отношения к вашей проблеме. Вам нужно создать демонстрационную версию jsFiddle с вашим HTML / CSS, показывающую проблему, которую вы описали: "The fieldset’s background color gets out of border in IE" .

Ответ №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;
}