简体   繁体   English

fieldset-Internet Explorer中的虚线边框解决方法?

[英]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. 似乎IE(9/10 / others?)如果忽略具有虚线边框的字段集元素的边框宽度1。 Anyone know a workaround? 有人知道解决方法吗?

Fiddle: http://jsfiddle.net/9hjys/ 小提琴: 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

I recreated the problem in IE11. 我在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. 当图例父级字段集周围有虚线或虚线边框时, 图例标记似乎存在IE错误。

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. 可以通过其他方式更改该位置,但这超出了此问题的范围。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM