为什么 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 和 left 属性以获得类似的效果。例如，在测试页的 style 标签中，取消注释此 CSS:
/* Firefox */
/*top: -20px;
left: -25px;*/
最佳答案
legend 元素古怪古怪。也就是说，如果所有其他浏览器做同样的事情，那么 Firefox 也应该做同样的事情。
这里已经有一个错误报告详细描述了这个问题:https://bugzilla.mozilla.org/show_bug.cgi?id=450418
解决方法是在 fieldset 中添加一个包装器 div 并将 padding 移动到它。
您未更改的代码: http://jsbin.com/ivedo4
固定码: http://jsbin.com/ivedo4/2
我使用您在问题中列出的相同浏览器(不是相同版本，但接近)对其进行了测试，并且呈现是一致的。
我的代码在 IE8 中看起来不太正确，但你的代码以完全相同的方式损坏。
关于css - 为什么 Firefox 4 对字段集图例的定位绝对不同于其他浏览器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5937508/