为什么Firefox 4绝对不像其他浏览器那样定位fieldset图例？ 测试页面： !DOCTYPE htmlhtml dir="ltr" lang="en" head meta charset="utf-8"/ titleTest/title style type="text/css" * { margin: 0; padding: 0; } body { font-famil
测试页面：
<!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中,我必须更改顶部和左侧属性以获得类似的效果.例如,在测试页面的样式标记内,取消注释此CSS：
/* Firefox */
/*top: -20px;
left: -25px;*/
传奇元素古怪而奇怪.话虽如此,如果所有其他浏览器做同样的事情,那么Firefox应该做同样的事情.
这里已经有一个错误报告详细描述了这个问题：https://bugzilla.mozilla.org/show_bug.cgi?id=450418
解决方法是在字段集内添加包装器div并将填充移动到该字段集.
您未更改的代码：http://jsbin.com/ivedo4
固定代码：http://jsbin.com/ivedo4/2
我使用您在问题中列出的相同浏览器(不是相同的版本,但很接近)测试它,并且渲染是一致的.
我的代码在IE8中看起来不太正确,但你的代码完全相同.