Search code examples
htmlcssinternet-explorerinternet-explorer-9internet-explorer-10

fieldset - dashed borders in Internet Explorer workaround?

It appears that IE (9/10/others?) is ignoring the border-width of 1 for fieldset elemenets if it has a dashed border. Anyone know a workaround?

Fiddle: 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>

https://i.sstatic.net/LOois.png

Solution

  • I recreated the problem in IE11.

    There seems to be an IE bug with the legend tag when there is a dashed or dotted border around that legends parent fieldset.

    Solution - Make the legend display inline as so:

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

    That eliminates the anomaly but will also change the position of the legend to inside the fieldset. That position can be changed by other means, but that is out of the scope of this question.