(For english speaking readers: this post explains a hack for IE letting it properly display fieldset and legend with background colors. Pictures describe the problem, and the code at the end of post solves it.)

В рамках згаданої " інтернетоексплорерізаціі "Мені не пощастило натрапити на досить гидко виглядає баг. Справа в тому, що мені захотілося зробити, здавалося б, просту річ: призначити елементам Fieldset і Legend кольору фону ...

Я, нічтоже сумяшеся, зробив так:

fieldset {background-color: # E3EEE3; } Legend {background-color: #ACA; }

І ось як це виглядає в моєму Firefox'е:

А ось IE:

Фон, що виповзає за верхню межу, виглядає жахливо. Пошук того, як це поправити, крім парочки заяв про те, що це поправити неможливо, виявив все ж одне рішення , Яке мені не сподобалося тим, що використовує додатковий порожній div, а також тим, що вішає Fieldset абсолютно, ніж збиває все розкладку.

Тоді я вирішив помучитися трохи сам. Я став експериментувати з різними margin'амі і padding'амі і позиціонуванням, що досить швидко ввело мене в гнітючий стан. Верхні позитивні margin'и на Legend діють на всю конструкцію цілком, а негативні і зовсім призводять до країн ефекту, коли їде наверх Legend тягне за собою рамку Fieldset'а, але залишає на місці його фон!

Втім, потім мені вдалося зловити комбінацію, яка робить як-раз то, що хочеться. Ось вона:

* HTML fieldset {position: relative; } * HTML legend {position: relative; top: -0.6em; margin-bottom: -0.6em; }

Пара коментарів:

• * HTML - це зручний хак, який робить це правило працює тільки в IE, інші браузери його ігнорують.
• -0.6em - це половина висоти рядки Legend. Однак, якщо це висоту ви якось міняєте (padding, line-height, height ...), то треба буде просто підібрати іншу цифру.

Що цікаво, буквально через день я наткнувся на практично такий же спосіб , Який вивів сам. Причому, я не дуже розумію, як у мене вийшло годі й шукати його в перший раз :-). Але тим не менш, мій мені все одно подобається більше, бо в ньому менше потворних хаков з прихованою різних правил від різних браузерів.