fieldset - Internet Explorer 解决方法中的虚线边框？答案

【问题标题】：fieldset - dashed borders in Internet Explorer workaround?fieldset - Internet Explorer 解决方法中的虚线边框？
【发布时间】：2013-11-28 02:53:47
【问题描述】：

如果 IE (9/10/others?) 有虚线边框，它似乎会忽略字段集元素的边框宽度 1。有人知道解决方法吗？

小提琴：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>

【问题讨论】：

在我的 IE9 中似乎可以工作，你能发布 IE 和其他屏幕截图的区别吗？

标签： html css internet-explorer internet-explorer-9 internet-explorer-10

【解决方案1】：

我在 IE11 中重现了这个问题。

当图例父字段集周围有虚线或虚线边框时，似乎存在带有 legend 标记的 IE 错误。

解决方案 - 使图例显示为内联：

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

这消除了异常，但也会将图例的位置更改到字段集中。可以通过其他方式更改该位置，但这超出了本问题的范围。

【讨论】：