HTML中fieldset标签设置圆角时如何兼容IE浏览器？
这是Chrome浏览器下的显示效果（有圆角）这是Firefox浏览器下的显示效果（有圆角）这是IE(11)浏览器下的显示效果（无圆角）如何调试这个兼容性，让IE浏览器也能...
这是Chrome浏览器下的显示效果（有圆角）
这是Firefox浏览器下的显示效果（有圆角）
这是IE(11)浏览器下的显示效果（无圆角）
如何调试这个兼容性，让IE浏览器也能如Chrome和Firefox一样能够显示圆角效果？代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>legend</title>
</head>
<body>
<form>
<fieldset style="width:500px; height:50px; border:1px solid #009; border-radius:5px; background:#DDD;">
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html> 展开
这是Firefox浏览器下的显示效果（有圆角）
这是IE(11)浏览器下的显示效果（无圆角）
如何调试这个兼容性，让IE浏览器也能如Chrome和Firefox一样能够显示圆角效果？代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>legend</title>
</head>
<body>
<form>
<fieldset style="width:500px; height:50px; border:1px solid #009; border-radius:5px; background:#DDD;">
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html> 展开
展开全部
fieldset标签在不同浏览器显示效果是不同的。
在IE6、IE7、IE8、IE9下fieldset的padding值为0，firefox5、chrome13下左右内边距约为12px。当把legend设为width：100%时，IE6、IE7出现水平滚动条，且legend与fieldset内其它内容没有对齐。解决方法为legend在IE6、IE7单独设置margin:0 -7px。
参考样式：
fieldset{border:0 none;background-color:red;padding:0;}
legend{width:100%;background-color:green;padding:0;*margin:0 -7px;}建议还是直接css写。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
目前好像让所有浏览器都兼容的圆角办法就是做圆角的背景图
更多追问追答
追问
额 难道就不能在代码上兼容？
追答
你打开ie开发者工具调试那里 看看文本模式看看是ie几的了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
border: 1px solid #009;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
试一下这样看看！
Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
试一下这样看看！
Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。
更多追问追答
追问
我之前就已经试过了，但还是兼容不了
追答
那抱歉 我也没有找到有效的方法。或者你可以通过背景图片来设计。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
