Question

Firefox 4中my blog上的搜索提交按钮上的文本位置非常低，但不是Chrome 10或IE9。我已经尝试了几乎所有的东西，除了降低文本的字体大小之外什么也没有用，这不是最佳解决方案，因为文本太小了。

截图

Windows 7上的Firefox 4：

Firefox 4 screenshot

Windows 7上的Google Chrome 10.0.648.204：

Google Chrome screenshot

相关的HTML：

<form method="get" class="searchform" action="http://eligrey.com/blog"> 
    <input type="search" placeholder="search" name="s" /> 
    <input type="submit" value="&#128269;" title="Search" /> 
</form>

相关的CSS规则（来自http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css）：

.searchform input[type="submit"] {
    font-family: "rfhb-lpmg";
    color: #ccc;
    font-size: 3em;
    background-color: #959595;
    text-align: center;
    border: 1px solid #888;
    height: 34px;
    width: 42px;
    line-height: 34px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition-property: border, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -moz-transition-property: border, background-color, box-shadow;
    -moz-transition-duration: 0.2s;
}

rfhb-lpmg只是我制作的一个自定义字体，它实现了U + 2767旋转花心心和U + 1F50E右指向放大镜，带有简单的字形。

Answer 1

我推断出主要的问题是line-height属性。

两种浏览器都尝试垂直居中按钮上的所有文本。但是，结合height属性，如果没有足够的空间来渲染完整的标准行高（字形填充随着大字体大小而变得非常大），两个浏览器都会将字形固定到顶部。按钮，修剪底部。

通常情况下，line-height会有助于调整此项，而在Chrome中，在您的示例中，这是成功的。但是，对于button和input type="submit"元素，Firefox完全忽略 line-height ，因此不能以这种方式使用它来“修复”人物。使用下面的极端示例，我们可以看到Chrome中的文本已经被推出了可见性，而它仍然保留在Firefox的（垂直）中心。

<!doctype html>

<html>
<body>
<style type="text/css">
input {
    border:1px solid black; 
    line-height:1000px;
    height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>

Firefox ： Firefox Chrome ： Chrome

当按钮元素保留为原生样式（删除border）时，两个浏览器都会忽略line-height（奇怪的是，Chrome也忽略了高度，但Firefox没有）。只要按钮是自定义样式，Chrome就会选择line-height但Firefox不会。

那你能做什么？

如果您仍想使用CSS字体......

首先，确保您的字体以相同的垂直对齐方式呈现字形，标准字体显示基本的全高字符，如H。 （看起来你已经完成了大部分工作，因为你的网页看起来比问题中的屏幕截图要好得多。）
其次，你会注意到如果你使用像Arial这样的字体，并显示一个H（在相同的字体大小），它也是低的。这是因为内置的字体的标准行高为它提供了相当多的空间。这表明如果你可以编辑字体来修剪它，，那么你可能会取得一些成功，从而为角色提供足够的空间，使其不被浏览器底部修剪。
可能对你不太理想，但仍然是一个选项，你可以使用其他元素，或者与button/submit元素结合使用，或者代替?元素，以使角色到位。

替代选项

我不确定您使用CSS字体的目标是什么，但通常是针对某种形式的渐进增强/优雅降级。在这种情况下，虽然（正如你在评论中所说）特殊字符是标准化的Unicode“右指向放大镜”，但如果它没有渲染，它对用户仍然没有任何意义。

鉴于优雅降级的好处是允许更简单的技术显示您的网站而不会出现损坏，使用此字符似乎是可疑的 - 如果没有CSS字体或具有此字符的本机字体，它将呈现为?a {{ 1}}，或者只是一个空白框。

考虑到这个问题，优雅降级的更好选择是简单地使用 background-image 。制作“搜索”按钮的文本，隐藏文本（通过CSS），然后应用背景图像，然后你有实际的优雅降级，以及更好的浏览器的奇特角色。

背景图片也（显然依赖于文件本身）还有其他好处，例如更快的加载和渲染时间（例如，如果开发人员想要使用完整的单个字符） -character-set font）。

Answer 2

FF4在输入元素上设置自己的样式。如果您将其粘贴到您的网址字段中，则可以检查所有这些内容：

resource://gre-resources/forms.css

或者，如果您检查了Firebug，则可以在“样式”选项卡下拉列表中选中“显示用户代理CSS”。

在此处检查解决方案：How to reset default button style in Firefox 4 +

Answer 3

我得出与Renesis相同的结论，但我不确定Firefox是否不尊重行高或垂直对齐。以下是允许您继续使用您的花式字形的不同解决方案的概述。由于您使用像素大小的按钮，尝试沿着这些线（简化的HTML）。这可能是过度的，背景图像几乎肯定会更合适，但无论如何。

简化的html：

<div class="searchform">
  <input type="search" placeholder="search" name="s"  />
  <span><input type="submit" value="&#128269;" title="Search" /></span>
</div>

简化的css：

// hide the border and background for the submit button
.searchform input[type="submit"] {
  border: none;
  background: transparent;
}
// give the span the properties that the submit button has now
span {
  position: relative;
  width: 30px; // or whatever
  height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
  position: absolute;
  margin-top: -15px; // half the span height
  margin-left: -15px; // half the span width
  top: 50%;
  left: 50%;
  bottom: 0;
  right: 0;
}

Answer 4

在按钮内部使用CSS时，我遇到了类似的问题。在Firefox中，文本偏移了1个像素，其余的浏览器也没问题。我使用了特定于Firefox的“填充”属性，方法如下

输入按钮文本在Firefox中低一个像素的原始代码

.mybutton { 
    height:32px; background-color:green; 
    font-size:14px; color:white; font-weight:bold; 
    border:0px; -moz-border-radius:16px; border-radius:16px;
}

并且在上面的css之后添加了Firefox特定的填充之后，它在Firefox中是完美的

@-moz-document url-prefix() {
    .mybutton { padding-bottom:1px; }
}

在你的情况下，你可能需要更多填充底部，并且可能填充顶部也是负数（-1px或-2px）。

Answer 5

当我在寻找这个问题的解决方案时，我遇到了这个问题，但是因为我从来没有真正找到任何改变填充底部的提示，我想分享一下，我发现调整padding-bottom只是为了firefox工作大。

每个其他浏览器都允许足够的行高控制来调整文本定位。

/* This gets picked up in firefox only to adjust the text into the middle */
@-moz-document url-prefix() {
    input[type="button"],
    input[type="submit"],
    button.btn {
        padding-bottom: 6px;
    }
}

Answer 6

我本周早些时候发生了这样的事情 - 我发现你必须将某些ccs元素应用于'parent'元素而不是'child'。所以基本上在.searchform div中尝试一些像vertical-align的css。

与此同时，我在smartemini.com上遇到了我的搜索图标问题。它适用于除了ie9之外的aaaaallllll浏览器。：（

Answer 7

我遇到了同样的事情。我能够解决我的问题，从底部推送填充（！）

padding: 0 0 2px 0; /* total height: 36px */
height: 34px;

或者，在更大的图片中，如果您想要一致的输入['..']和锚点按钮，请使用明确的重写调整后者进行完全控制。

/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL  {
    display: block;
    font-size: 14px;
    line-height: 14px; /* just a precaution, likely ignored in FF */

    padding: 0 0 2px 0; /* total height: 36px */
    height: 34px;   
    ...
}

/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL  {
    padding: 12px 0 0 0; /* total height: 36px */
    height: 24px;
}

（“T恤尺码”导致不同的背景偏移和其他地方的宽度）

Answer 8

您在这里看到的是，当空间紧张时，浏览器在按钮元素内呈现文本的方式有多么不同。 Chrome将测试垂直放在中心，而Firefox顶部对齐。

最重要的是，你使用的是自制字体，在垂直高度/前导/等方面可能会有一些潜在的问题。

我注意到当我向input的{{1}}添加任何其他字符时 - 放大镜在Firefox中进一步下降。这表明以某种方式调整字体（如垂直位置或裁剪掉顶部/底部空白区域）可能有所帮助。

如果失败，您应该将value更改为<input type="submit"/>元素，并查看样式<button type="search" title="Tooltip">Label</button>是否比定格button更容易。

如果问题仍然存在，您需要切换战术并将按钮包裹在input中。

<div class="btnwrap" />

（顺便说一下，你可以选择在.searchform .btnwrap { display: inline-block; overflow: hidden; height: 32px; border: 1px solid #888; /* plus the border-radius styles */ } .searchform button { /* all the original button styles, except the border */ height: 50px; margin: -9px 0; /* (32-50)/2 = -9 */ }内包裹button文字并做类似的负边缘黑客攻击，尽管我怀疑使用{{更容易获得垂直居中1}}在<span/>内。）

那就是说，你真的应该使用一个好的老式背景图像替换 - 它将更快地渲染和加载。： - ）

祝你好运！

Answer 9

此问题仅发生在启用了 DirectWrite 渲染模式的Firefox 4 / Win7上（默认情况下已启用）。 Firefor4 GDI渲染模式正常工作。

可能由 vertical-align 属性导致 baseline 。但U1F50D的基线不在最低点。也许你应该尝试将字体点移动一点，将最低点的y点设置为0.

Answer 10

这里有很多东西......我认为这是最简单的方法：

.searchform input[type="submit"]
{
    height: 35px;
    line-height: 35px;
    font-size: 2em;
}

希望这有助于= D

Answer 11

我发现填充和线高的组合可以解决这个问题。如上所述，Firefox会忽略行高。

确保设置比顶部填充更大的底部填充。稍微调整一下，你就可以在Firefox中垂直对齐文本。
然后您会看到这会将文本推得太靠近Webkit中元素的顶部。现在使用一个较大的行高来在Webkit中正确对齐它，瞧！

我在运行Firefox 7，Chrome 16，Safari 5.1和IE9的Windows 7计算机上进行了测试。

文本在提交按钮中的位置

截图

11 个答案: