IE выпускает минимальные маржинальные легенды в Fieldset

Question

Возникла некоторая проблема IE с наборами полей, как вы можете видеть на изображении, что IE даже IE9 не получает margin-top: -26px; Кто-то как знает исправление?

fieldset{
  border: 1px solid #CCC;
  border-top-color: #AAA;
  border-left-color: #AAA;
  background: #EEE;
  margin: 35px 0;
  padding: 10px;
}

legend {
  border: 1px solid #AAAAAA;
  border-bottom: none;
  padding: 5px 10px;
  margin-left: -11px;
  margin-top: -26px;
}

Изображение: http://i.stack.imgur.com/oVhb2.png

edit: у Google chrome такая же проблема

Answer 1

Наборы полей и легенды, как известно, сложно одинаково стилизовать в разных браузерах. Вы должны действительно соответствовать их ограничениям, а не соответствовать тому, что вы хотите. С учетом сказанного ... если вы все еще упрямы и хотите сделать не то , вы должны поместить элемент в legend, который вы стилизуете. Примерно так ( см. Fiddle ) будет работать для Chrome и IE (Примечание: он будет не выглядеть как Firefox).

fieldset{
    border: 1px solid #CCC;
    border-top-color: #AAA;
    border-left-color: #AAA;
    background: #EEE;
    margin: 35px 10px;
    padding: 10px;
    position:relative;
}
legend {
    position:absolute;
    top:0;
}
legend span {
    border: 1px solid #AAA;
    border-bottom: none;
    padding: 5px 10px;
    position:absolute;
    left: -11px;
    top: -30px;
}

Пара вещей, на которые стоит обратить внимание ...

1. Позиционируя абсолютную легенду, вы обманываете браузер, чтобы стилизовать границу на всей верхней части набора полей. Если бы это не было сделано, был бы небольшой промежуток, где находится fieldset.
2. Вы делаете массу предположений о том, как браузер будет стилизовать это, что может или не может быть правильным.

Answer 2

добавление

.fieldset{display: block;

у меня работает