Проблемы со сплошной границей набора полей в IE8

Я хочу стилизовать свои наборы полей так, чтобы они имели сплошную границу.

Поэтому я стилизовал так...

fieldset {
    margin: 5px;
    padding: 20px;
    border: solid orange;
    border-width: 30px 1px 1px 1px;
}

fieldset legend {
    background-color: orange;
    line-height: 30px;
    /* uncomment line below for IE8 */
    /* margin-top: -50px; */
}

И так это выглядит в большинстве браузеров (IE9, Chrome, FF14)...

как это должно выглядеть

У меня проблемы с тем, чтобы это работало в IE8. Я добавил поле -ve, чтобы правильно выровнять легенду, но с каждой стороны легенды все еще есть две вертикальные белые полосы, от которых я не могу избавиться...

на MSIE8

Скрипт... http://jsfiddle.net/spiderplant0/NmwuC/

Любые идеи, как избавиться от белых полос в IE8 (мне все равно на IE7, IE6 и т. д.)?

(Кстати, HTML генерируется фреймворком Drupal, поэтому я бы предпочел решение, которое не требует изменения HTML.)


person spiderplant0    schedule 25.07.2012    source источник
comment
Попробуйте это *{border:0;margin:0;padding:0;}   -  person Ron van der Heijden    schedule 25.07.2012
comment
@Bondye - спасибо, но, боюсь, не сработало.   -  person spiderplant0    schedule 25.07.2012


Ответы (1)


Я проверил это и изменил на IE8. Проверьте http://jsfiddle.net/NmwuC/16/.

Это только для IE8.

person Narendra    schedule 25.07.2012
comment
Спасибо @rain. Близко, но я получаю дополнительный артефакт над полосой на правой стороне. - person spiderplant0; 25.07.2012
comment
Пожалуйста, предоставьте скриншот вашего результата. Потом еще раз проверю. - person Narendra; 26.07.2012
comment
Как это выглядит для меня в IE8: что я получаю. - person spiderplant0; 26.07.2012
comment
Проверьте новую ссылку jsfiddle в ответе, теперь она должна работать. Дайте мне знать, если проблема все еще существует. - person Narendra; 27.07.2012