Fieldset, Legend, Background-Color и IE

(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...), то надо будет просто подобрать другую цифру.

Что интересно, буквально через день я наткнулся на практически такой же способ, который вывел сам. Причем, я не очень понимаю, как у меня вышло не найти его в первый раз :-). Но тем не менее, мой мне все равно нравится больше, потому что в нем меньше уродливых хаков со скрытиями разных правил от разных браузеров.