IE CSS Fieldset граница распространяется слишком далеко вправо: почему?

Question

Я определил набор полей в HTML и применил к нему следующие (простые) правила CSS:

fieldset 
{
    margin: 2em 0;
    position:relative;
    padding: 1em;
    border:1px solid #ccc;
}

Все отлично, ничего страшного, кроме как во всех версиях (ну, насколько я знаю, до 7) верхняя граница IE - но, что интересно, нижняя граница - набора полей визуально расширяется далеко вправо примерно на 25 пикселей за пределами вертикальной границы с этой стороны.

Стоит отметить, что ширина этого элемента приводит к тому, что он выходит за пределы родительского элемента по ширине вправо, например, при просмотре в Firebug.

Что вызывает эту проблему в IE? Это известная проблема, и, если да, то что за исправление / хак / обходной путь?

Answer 1

Я боролся с этим в течение некоторого времени; сегодня вечером я наконец нашел ответ.

http://www.sitepoint.com/forums/showthread.php?t=526881

Цитировать NatalieMac:

Кажется, что если у вас есть элемент внутри набора полей, который переполняется справа от набора полей он расширяет верхнюю границу. У меня есть контейнер установлен на ширину 100% без отступов или полей, которые IE7 мысль переполнялась по какой-то причине (хотя содержимое внутри этот контейнер был выровнен по правому краю и виден в пределах границы FIELDSET).

Мне удалось это исправить, просто добавив переполнение: скрытое для набора полей.

Я могу подтвердить, что это действительно решает проблему и для меня.

Answer 2

Не могли бы вы опубликовать больше своего кода, например HTML-код того, что окружает набор полей, и соответствующие правила CSS для этого?

Вы упомянули, что вы можете видеть, что он шире, чем его родительский элемент в Firebug. Это почти наверняка связано. Можете ли вы изменить CSS родительского элемента, чтобы он стал достаточно широким, чтобы содержать набор полей?

Без дополнительного контекста, вероятно, будет сложно диагностировать это более точно ...