为什么 Firefox 4 对字段集图例的定位与其他浏览器完全不同？
测试页面：
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Tahoma, Arial, sans-serif;
font-size: 62.5%;
}
#wrapper
{
margin: auto;
padding: 1em;
width: 720px;
}
form
{
width: 670px;
padding: 25px;
background-color: #ffffff; /* White */
color: #000000; /* Black */
border: 1px solid #cccccc; /* Gray */
font-size: 12px;
}
fieldset
{
position: relative;
border: 1px solid #cccccc; /* Gray */
padding: 25px 10px 5px 15px;
margin-bottom: 20px;
}
fieldset legend
{
position: absolute;
top: 5px;
left: -10px;
/* Firefox */
/*top: -20px;
left: -25px;*/
font-weight: 900;
background-color: #ffffff; /* White */
}
/* Input Types */
label
{
margin-right: 10px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<form method="POST" action="test" id="testForm">
<fieldset>
<legend>Test</legend>
<label for="test">Test:</label><input type="text" id="test" name="test" value=""/>
</fieldset>
<input type="submit" value="Test"/>
</form>
</div>
</body>
</html>
请注意，在 Opera 11.10 Build 2092、Chrome 11.0.696.65、Safari 5.0.4 (7533.20.27) 和 Windows Internet Explorer 9 中，它们在左侧显示图例，与字段集边框重叠。
在 Firefox 4.0.1 中，我必须更改top and left属性来获得类似的效果。例如，在style测试页面的标签，取消注释此CSS：
/* Firefox */
/*top: -20px;
left: -25px;*/
legend元素古怪而怪异。话虽这么说，如果all其他浏览器做同样的事情，那么 Firefox 也应该做同样的事情。
这里已经有一个错误报告详细描述了该问题：https://bugzilla.mozilla.org/show_bug.cgi?id=450418 https://bugzilla.mozilla.org/show_bug.cgi?id=450418
解决方法是添加一个包装器div在 - 的里面fieldset并移动padding对此。
您未更改的代码： http://jsbin.com/ivedo4 http://jsbin.com/ivedo4
固定代码： http://jsbin.com/ivedo4/2 http://jsbin.com/ivedo4/2
我用相同的浏览器测试了它（不是完全相同的版本，但接近）您在问题中列出，并且渲染是一致的。
我的代码在 IE8 中看起来不太正确，但你的代码也以完全相同的方式被破坏。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
