问题描述
为什么Firefox 4绝对定位fieldset传说的方式与其他浏览器不同？测试页：
<！DOCTYPE html>
< html dir =ltrlang =en>
< head>
< meta charset =utf-8/>
< title>测试< /标题>
< style type =text / css>
*
{
margin：0;
padding：0;
}
body
{
font-family：Tahoma，Arial，sans-serif;
font-size：62.5％;
}
#wrapper
{
margin：auto;
填充：1em;
width：720px;
}
表格
{
width：670px;
padding：25px;
background-color：#ffffff; / *白色* /
颜色：＃000000; / *黑色* /
边框：1px实心#cccccc; / *灰色* /
font-size：12px;
}
fieldset
{
position：relative;
border：1px solid #cccccc; / *灰色* /
填充：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; / *白色* /
}
/ *输入类型* /
标签
{
margin-right：10px;
line-height：20px;
}
< / style>
< / head>
< body>
< div id =wrapper>
< form method =POSTaction =testid =testForm>
< fieldset>
<图例>测试< /图例>
< label for =test> Test：< / label>< input type =textid =testname =testvalue =/>
< / fieldset>
< input type =submitvalue =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 属性来获得类似的效果。例如，在测试页面的样式标签中，取消注释这个CSS：
/ * Firefox * /
/ * top：-20px;
left：-25px; * /
legend 元素古怪怪异。也就是说，如果所有其他浏览器都做同样的事情，那么Firefox应该做同样的事情。
这里已经有一个错误报告详细描述这个问题：
解决方法是在中添加一个包装，然后将 div fieldset padding 移动到那个地方。
固定代码： http://jsbin.com/ivedo4/2
我使用相同的浏览器（而不是 版本，但接近）
我的代码在IE8中看起来不太正确，但是您的代码与山姆就这样。
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;*/
legend elements 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 div inside the fieldset and move the padding to 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.
这篇关于为什么Firefox 4绝对将字段集的传说定位为与其他浏览器不同呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！