IE显示字段集图例不正确 [英] IE displaying fieldset legend incorrectly
本文介绍了IE显示字段集图例不正确的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的代码在FF中显示正常,但在IE中,它使用的图例几乎出现在字段集中,字段集后没有图例空间。我已经包括图片,所以你可以看到确切的问题。我会感激,如果有人可以告诉我在哪里我错了,因为我花了2天试图排序这。感谢
完成代码布局:
fieldset {
display:block;
margin:0 0 30px;
}
The code I am using is appearing fine in FF but in IE, it resorts to the legend appearing almost in the fieldset with no space for the legend after the fieldset. I have included pic so you can see exact problem. I would be grateful if someone could show me where I am going wrong as I have spent 2 days trying to sort this. Thanks
Complete code layout: http://jsfiddle.net/XLPxx/
legend {
background:#00C621; color:#fff;
font:17px/21px Calibri, Arial, Helvetica, sans-serif;
padding:0 10px; margin:-26px 0 -5px -11px;
font-weight:bold; border:1px solid #fff;
border-color:#e5e5c3 #505014 #666661 #e5e5c3; cursor: pointer;
}
fieldset.action {
background:#9da2a6;
border-color:#e5e5e5 #797c80 #797c80 #e5e5e5;
margin-top:-20px;
}
fieldset {
background:#f2f2e6;
padding: 0 10px 10px 10px;
border:1px solid #fff;
border-color:#666661 #fff #666661 #fff;
margin-bottom:20px; width:450px;
}
解决方案
You need to add a larger bottom margin to your fieldset
and make it display:block
. Live example: http://jsfiddle.net/XLPxx/7/
fieldset{
display:block;
margin: 0 0 30px;
}
这篇关于IE显示字段集图例不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文