Firefox 3.6 和 CSS 与以前版本的 Firefox 3.5 和后面的区别？答案

【问题标题】：Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?Firefox 3.6 和 CSS 与以前版本的 Firefox 3.5 和后面的区别？
【发布时间】：2011-02-23 06:25:57
【问题描述】：

因此，在升级到 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 现在似乎有自己的问题，因为它希望根据所有内容的高度垂直居中文本（忽略行高的任何证据）。换句话说，如果您希望文本垂直靠近顶部，我还没有找到一种方法来做到这一点。

想法？

【问题讨论】：

你能发布 CSS 或链接吗？
3.6 有一个新的渲染引擎，在这里看到一个类似的问题：stackoverflow.com/questions/2120499/…
是的，我在寻找修复程序时确实看到了这个问题/问题。我实际上恢复到 Firefox 3.5.7，因为我只是没有时间处理它。我会尽力提供更多信息（例如css）。我确实注意到了一件事——当我进行升级时，它并不是这个特定站点上唯一发生的地方，所以它不仅仅是孤立于站点上的一个地方。
听起来很多人都说它依赖于填充，而不是高度，这令人不安，因为字体渲染大小因浏览器而异，这就是为什么我喜欢依赖高度来控制高度输入（有道理，对吗？）但是当我有机会时，我会尝试一下。
呜呜呜。这正在进行中。它现在似乎在 IE 中中断。 IE 想要将文本置于顶部。显然我错过了一些东西。现在我已经通过 IE 特定的样式修复了，但是太痛苦了！

标签： css firefox3.6

【解决方案1】：

这里有一些解决问题的提示，因为您没有发布足够的信息来提供任何具体建议：

你使用doctype吗？
您是否使用重置stylesheet？
你有validated your markup（HTML 和 CSS）吗？

【讨论】：

是的，使用文档类型：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">使用 YUI 重置。

【解决方案2】：

Firefox 3.5 和 Firefox 3.6 以不同的方式呈现输入 css 填充。我这样做了，它修复了我的输入。我删除了高度并在顶部和底部添加了填充。填充高度与我的字体高度相结合，使输入在两个浏览器中都是正确的高度，并且在我键入时显示在中心的文本。

坏了：

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    height:19px;
    padding:5px 2px 0 2px;
}

已修复：

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    padding:5px 2px;
}

【讨论】：

【解决方案3】：

我在自己的网站上遇到了完全相同的问题。我有一个公开版本，你可以在：http://www.cleantelligent.com/login-example/

对我来说，这与在文本/密码输入上设置 css 图像背景有关。

添加重置样式表（在本地副本中）没有任何区别，并且 CSS 验证。

编辑：删除 CSS 中的高度并添加更多填充似乎可以解决问题。我将其缩小到 FF 3.5，IE 将文本垂直放在输入的顶部，而 FF3.6 和 webkit 将文本垂直居中。使用 padding 而不是 height 使框变大可以正确放置文本。

【讨论】：

我最初将此标记为答案，但对于文本需要靠近顶部或底部的图像，它似乎仍然会在 webkit 中中断。 Webkit 试图垂直居中。想法？

【解决方案4】：

我也必须删除 line-height 以使其在 IE 中工作。

【讨论】：

【解决方案5】：

从输入框中删除高度属性并仅使用填充来定义垂直间距解决了我的问题。

【讨论】：

【解决方案6】：

填充问题可以这样解决：

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner
{
 padding: 0px; border: 0px
}

【讨论】：

【解决方案7】：

在 FF 3.6 中没有这个问题。这是发生在我身上的网站：http://www.pointtopointsurvey.com/（搜索框）

我使用的是 xhtml 过渡文档类型，当我通过验证运行 CSS 时，收到的唯一错误是基于浏览器的 CSS3 属性 (-moz-border-radius)。

我还使用了 Eric Meyer 的 CSS 重置的略微修改版本

我还要注意，它似乎只影响了垂直填充，而不影响水平填充。

【讨论】：

【解决方案8】：

是的 - 高度 + 填充的组合在 FireFox 3.6 中为我打破了它。我删除了输入的高度，并通过增加给定元素底部的填充来补偿这个值的损失。现在很好。迄今为止，我在 FF 3.6 中遇到的唯一问题是在线表单和输入。

（我的输入使用背景图片）

【讨论】：

另见我的 webkit 场景解决方案。

【解决方案9】：

好的——我只是想到了一个（烦人的）解决 webkit 问题的方法：在顶部和底部添加相等的部分填充，并将图像位置向下对齐到足以使文本居中。有人有其他（更好的？）想法吗？这只适用于这种情况，因为输入是绝对定位的。在其他情况下，我可能必须包含一个负的上边距来补偿顶部的额外填充，我通常会尽量避免。

另外，不要忘记删除高度，正如其他 cmets 中已经指出的那样。

【讨论】：

另外，需要 IE 特定的样式，因为 IE 想要将文本垂直放置在顶部。

【解决方案10】：

我用一个额外的!important css 解决了这个问题，仅用于输入，如下所示：

input.gld-editable-input {
 padding: 3px 6px !important;
}

解决了 FF3.6 中的问题，但让我保留 Webkit 中已经工作的填充...

【讨论】：