fieldset-пунктирные границы в обходном пути Internet Explorer?

Оказывается, что IE (9/10 / другие?) игнорирует ширину границы 1 для элемента fieldset, если он имеет пунктирную границу. Кто-нибудь знает обходной путь?

Скрипка: http://jsfiddle.net/9hjys/ 

<!DOCTYPE html><html><head></head><body>

<fieldset style='border:1px dashed;'>
   <legend style="background:white;">test</legend>
   fieldset dashed border is more than 1px wide in IE (9/10 at least, 
   not sure about others)
</fieldset>

<fieldset style='border:1px solid;'>
   <legend>test</legend>
   solid border is all normal like.
</fieldset>

<br/>
<div style='border:1px dashed;display:inline-block;'>
   inline-block divs work normal
</div>

<br/><br/>

<div style='border:1px dashed;display:block;'>
   block divs work normal
</div>

</body></html>

http://i.stack.imgur.com/LOois.png

1 2
html css internet-explorer-9 internet-explorer-10

1 ответ:

Я воссоздал проблему в IE11.

Похоже, что ошибка IE с тегом legend, когда есть пунктирная или пунктирная граница вокруг родительского набора полей legends.

Решение - сделать отображение легенды встроенным следующим образом: 

<legend style="background:white; display: inline;">test</legend>

Это устраняет аномалию, но также изменит положение легенды внутри набора полей. Эту позицию можно изменить и другими способами, но это выходит за рамки данного вопроса.

Сэм

1