3

因此，在升级到 Firefox 3.6 时，CSS 在输入框上中断了。填充增加了——也可能是字体大小在某种程度上表现不同。想知道是否还有其他人看到过这个问题。完全想不通。

HTML 代码：

<form>
    <fieldset>
        <label for="inputField">Label</label>
        <input type="text" id="inputField" />
    </fieldset>
</form>

代码：

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

想法？

4

10 回答 10

4

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

于 2010-01-25T16:46:59.653 回答
3

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;
}
于 2010-02-02T15:22:59.147 回答
2

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

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

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

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

于 2010-01-25T20:17:02.770 回答
2

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

于 2010-02-08T11:15:06.673 回答
1

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

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner
{
 padding: 0px; border: 0px
}
于 2011-01-28T13:55:09.693 回答
1

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

于 2010-02-05T11:42:41.860 回答
0

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

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

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

于 2010-01-26T15:42:58.027 回答
0

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

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

于 2010-02-25T17:07:15.213 回答
0

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

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

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

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

于 2010-01-25T23:37:18.277 回答
0

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

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

于 2010-03-18T16:42:14.800 回答