Question

因此，在升级到Firefox 3.6时，CSS打破了输入框。填充增加了 - 也可能是字体大小在某种程度上表现不同。想知道是否有其他人已经看到这个问题了。无法弄明白。

HTML CODE：

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

想法？

Answer 1

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

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

Answer 2

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

BROKEN：

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

FIXED：

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

Answer 3

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

看到

对我而言，它与在文本/密码输入上设置CSS图像背景有关。

添加重置样式表（在本地副本中）没有什么区别，CSS验证。

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

Answer 4

我也必须删除行高，以使其在IE中工作。

Answer 5

从输入框中删除height属性并仅使用填充定义垂直间距为我解决了这个问题。

Answer 6

填充问题可以通过以下方式解决：

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

Answer 7

在FF 3.6中出现此问题。这是我发生的网站：http://www.pointtopointsurvey.com/（搜索框）

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

我也使用了Eric Meyer的CSS重置

的略微修改版本

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

Answer 8

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

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

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

Answer 9

是的 - 高度+填充的合并在FireFox 3.6中为我打破了它。我删除了输入的高度，并通过增加给定元素底部的填充来补偿此值的丢失。现在好了。到目前为止我用FF 3.6唯一的问题是在线表格＆amp;输入

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

Answer 10

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

此外，请不要忘记删除高度，如其他评论中所示。

Firefox 3.6和CSS与以前版本的Firefox 3.5有何不同？

10 个答案: