为什么 Firefox 4 对字段集图例的定位与其他浏览器完全不同？
为什么 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;*/
Why does Firefox 4 absolutely position fieldset legends differently than other browsers?
Test page:
<!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>
Notice that in Opera 11.10 Build 2092, Chrome 11.0.696.65, Safari 5.0.4 (7533.20.27), and Windows Internet Explorer 9, they display the legend on the left, overlapping the fieldset border.
In Firefox 4.0.1, I have to change the top and left properties to get a similar effect. For example, within the style tag of the test page, uncomment this CSS:
/* Firefox */
/*top: -20px;
left: -25px;*/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
legend元素古怪而怪异。话虽这么说，如果所有其他浏览器都做同样的事情，那么 Firefox 也应该做同样的事情。这里已经有一个错误报告详细描述了该问题：https://bugzilla.mozilla.org /show_bug.cgi?id=450418
解决方法是在
fieldset内添加一个包装器div并移动对此进行填充。未更改的代码： http://jsbin.com/ivedo4
固定代码： http://jsbin.com/ivedo4/2
我用相同的浏览器测试了它（不是相同版本，但关闭）您在问题中列出，并且渲染是一致的。
我的代码在 IE8 中看起来不太正确，但你的代码也以完全相同的方式被破坏。
legendelements are quirky and weird. That being said, if all the other browsers do the same thing, then Firefox should do the same thing.There's already a bug report here describing the issue in detail: https://bugzilla.mozilla.org/show_bug.cgi?id=450418
A workaround is to add a wrapper
divinside thefieldsetand move thepaddingto that.Your unchanged code: http://jsbin.com/ivedo4
Fixed code: http://jsbin.com/ivedo4/2
I tested it with the same browsers (not identical versions, but close) you listed in your question, and the rendering was consistent.
My code doesn't look quite right in IE8, but yours is broken in exactly the same way.