Firefox 3.6 和 CSS 与以前版本的 Firefox 3.5 及之后有何区别？
因此，在升级到 Firefox 3.6 时，CSS 在输入框上崩溃了。填充增加了——也可能是字体大小的行为有所不同。想知道是否还有其他人见过这个问题。不太明白。
HTML 代码：
<form>
<fieldset>
<label for="inputField">Label</label>
<input type="text" id="inputField" />
</fieldset>
</form>
CSS 代码：（
form fieldset label {
display:block;
font-size:1.2em;
font-weight:bold;
padding:12px 9px;
}
#jumptoBox fieldset input {
background: url("../images/input.png") no-repeat scroll left top transparent;
font-size: 1.2em;
padding: 4px 5px 16px;
width: 99px;
height: 29px;
}
图像尺寸：109 宽 x 34 高）
因此需要注意的一件事是，修复（如下所述）包括删除高度，或至少将其设置为自动，然后使用填充对其进行补偿（这个修复在很多层面上都困扰着我，但我们现在将其放在一边）。但是 webkit 现在似乎有自己的问题，因为它想根据所有内容的高度将文本垂直居中（忽略行高的任何证据）。换句话说，如果您希望文本垂直地靠近顶部，我还没有找到一种方法来做到这一点。
有想法吗？
So, in upgrading to Firefox 3.6, the CSS broke on input boxes. The padding has increased -- it might also be the font-size is somehow behaving different. Wondering if anyone else has seen this problem yet. Can't quite figure it out.
HTML CODE:
<form>
<fieldset>
<label for="inputField">Label</label>
<input type="text" id="inputField" />
</fieldset>
</form>
CSS CODE:
form fieldset label {
display:block;
font-size:1.2em;
font-weight:bold;
padding:12px 9px;
}
#jumptoBox fieldset input {
background: url("../images/input.png") no-repeat scroll left top transparent;
font-size: 1.2em;
padding: 4px 5px 16px;
width: 99px;
height: 29px;
}
(Image dimensions: 109 width x 34 height)
So one thing to note, the fix (as outlined below) includes removing the height, or at least setting it to auto, and then compensating for it by using padding (a fix that bothers me on many levels, but we'll set that aside for now). BUT webkit seems to have its own problems with this now, since it wants to center the text vertically (ignoring any evidence of line-height) according to the height of everything. In other words, if you want the text vertically closer to the top, I haven't been able to figure out a way to do that.
Ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
以下是解决问题的一些提示，因为您还没有发布足够的信息来提供任何具体建议：
Here are a few tips to fixing the problem, as you haven't posted enough information for any concrete suggestions:
Firefox 3.5 和 Firefox 3.6 以不同方式呈现输入 css 填充。我这样做了，它修复了我的输入。我删除了高度并在顶部和底部添加了填充。填充高度与我的字体高度相结合，使输入在两个浏览器中都具有正确的高度，并且文本在我键入时显示在中心。
损坏：
修复：
Firefox 3.5 and Firefox 3.6 render input css padding differently. I did this and it fixed my inputs. I removed the height and added padding to the top and bottom. The padding heights in combination with my font height made the input the correct height in both browsers and the text to display in the center as I type.
BROKEN:
FIXED:
我自己的网站也遇到了完全相同的问题。我有一个公共版本，您可以在以下位置查看： http://www.cleantelligent.com/login-example /
对我来说，它与在文本/密码输入上设置 css 图像背景有关。
添加重置样式表（在本地副本中）没有什么区别，并且 CSS 有效。
编辑：
删除 CSS 中的高度并添加更多填充似乎可以解决问题。我将范围缩小到 FF 3.5 和 IE 将文本垂直放置在输入的顶部，而 FF3.6 和 webkit 将文本垂直居中。使用填充而不是高度来使框变大，可以正确放置文本。
I'm getting the exact same problem with my own site. I have a public version you can see at: http://www.cleantelligent.com/login-example/
For me it has to do with setting a css image background on the text / password input.
Adding the reset stylesheet (in a local copy) didn't make a difference, and the CSS validates.
EDIT:
Removing the height in the CSS and adding more padding seems to do the trick. I narrowed it down to that FF 3.5 and IE put the text at the top of the input vertically, while FF3.6 and webkit center the text vertically. Using padding instead of height to make the box bigger allowed the text to be placed correctly.
我还必须删除行高，才能使其在 IE 中工作。
I had to remove the line-height too, to make it work in IE.
从输入框中删除高度属性并仅使用填充定义垂直间距解决了我的问题。
Removing the height attribute from the input box and defining the vertical spacing by only using padding solved the problem for me.
填充问题可以这样解决：
Padding issue can be solved with this:
FF 3.6 中没有这个问题。这是我遇到的网站：http://www.pointtopointsurvey.com/（搜索框）
我正在使用 xhtml 过渡文档类型，当我通过验证运行 CSS 时，我收到的唯一错误是基于浏览器的 CSS3 属性 (-moz-border-radius)。
我还使用了 Eric Meyer 的 CSS 重置的稍微修改版本，
我还注意到它似乎只影响垂直填充，而不影响水平填充。
n'thing this issue in FF 3.6. Here's the site where it's happening for me: http://www.pointtopointsurvey.com/ (search box)
I'm using an xhtml transitional doctype and when I run my CSS through validation the only errors I receive are my browser based CSS3 properties (-moz-border-radius).
I'm also using a slightly modified version of Eric Meyer's CSS reset
I would also note that it seems to have only affected vertical padding, not horizontal padding.
是的 - 在 FireFox 3.6 中，高度 + 填充的组合打破了我的习惯。我删除了输入的高度，并通过增加给定元素底部的填充来补偿该值的损失。现在好了。迄今为止，我在使用 FF 3.6 时遇到的唯一问题是在线表格和表单。输入。
（我的输入使用背景图像）
yep- the cobination of height + padding was breaking it for me in FireFox 3.6. I removed the height on my input and compinsated the loss of this value by increasing the padding on the bottom of the given element. It is fine now. The only problem i have had with FF 3.6 to date was with online forms & input.
(my inputs were using background images)
好吧——我只是想到了一个（烦人的）解决 webkit 问题的方法：在顶部和底部添加等份的填充，并将图像位置向下对齐以使文本居中。有人有其他（更好的？）想法吗？这只在这种情况下才有效，因为输入是绝对定位的。在其他情况下，我可能必须包含一个负的上边距来补偿顶部的额外填充，我通常会尝试避免这种情况。
另外，不要忘记删除高度，正如其他评论中已经指出的那样。
Okay -- I just thought of an (annoying) fix for the webkit problem: add equal parts padding on top and bottom, and align the image positioning down enough to center the text. Anyone have any other (better?) ideas? This only works well in this situation because the input is absolutely positioned. In other scenarios I might have to include a negative top margin to compensate for the extra padding on top, which I try and avoid typically.
Also, don't forget to remove the height, as indicated already in other comments.
我使用额外的
!importantcss 修复了这个问题，仅用于输入，如下所示：解决了 FF3.6 中的问题，但让我保留 Webkit 中已经工作的填充...
I fixed this problem with an extra
!importantcss for just inputs, like this:Solved the problem in FF3.6 but let me keep the already working padding in Webkit...