Html 提交按钮中文本的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5599343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position of text in a submit button
提问by Eli Grey
The position of the text on the search submit button on my blogis very low in Firefox 4, but not Chrome 10 or IE9. I've tried almost everything, and nothing works except lowering the font size of the text, which isn't an optimal solution as the text will be too small.
我博客上搜索提交按钮上的文本位置在 Firefox 4 中非常低，但不是 Chrome 10 或 IE9。我几乎尝试了所有方法，除了降低文本的字体大小外，没有任何效果，这不是最佳解决方案，因为文本太小了。
Screenshots
截图
Firefox 4 on Windows 7:
Windows 7 上的 Firefox 4：
Google Chrome 10.0.648.204 on Windows 7:
Windows 7 上的谷歌浏览器 10.0.648.204：
The relevant HTML:
相关的 HTML：
<form method="get" class="searchform" action="http://eligrey.com/blog">
<input type="search" placeholder="search" name="s" />
<input type="submit" value="🔍" title="Search" />
</form>
The relevant CSS rule (from http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css):
相关的 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 is just a custom font I made which implements U+2767 rotated floral heart bullet and U+1F50E right-pointing magnifying glass with simplistic glyphs.
rfhb-lpmg 只是我制作的自定义字体，它实现了 U+2767 旋转花卉心形子弹和 U+1F50E 带有简单字形的右指向放大镜。
回答by Nicole
I've deduced that the main trouble is the line-heightproperty.
我推断出主要问题是line-height财产。
Both browsers attempt to vertically center all text on buttons. In combination with the heightproperty, however, if there is not enough room to render the full standard line-height (glyph padding grows quite large with large font sizes), both browsers will pin the glyph to the top of the button, trimming the bottom.
两种浏览器都试图将按钮上的所有文本垂直居中。height然而，结合该属性，如果没有足够的空间来呈现完整的标准行高（字形填充随着大字体变得非常大），两个浏览器都会将字形固定到按钮的顶部，修剪底部.
Normally, the line-heightwould help adjust this, and in Chrome, in your example, this was successful. However, in the case of buttonand input type="submit"elements, Firefox ignores line-heightaltogether, so it can't be used in this way to "fix" the positioning of the character. Using the extreme example below, we can see that the text has been pushed out of visbility in Chrome, while it still stays right in the (vertical) center in Firefox.
通常，这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: Chrome:
火狐：铬：
When a button element is left to the native style (remove the border), line-heightis ignored by both browsers (weirdly, Chrome also ignores the height but Firefox does not). As soon as the button is custom-styled, Chrome picks up the line-heightbut Firefox does not.
当按钮元素保留本机样式（删除border）时，line-height两个浏览器都会忽略（奇怪的是，Chrome 也忽略高度，但 Firefox 不会）。只要按钮是自定义样式的，Chrome 就会选择该按钮，line-height但 Firefox 不会。
So what can you do?
所以，你可以做什么？
If you still want to make use of CSS fonts...
如果您仍然想使用 CSS 字体...
- First of all, make sure your font renders the glyphs in the same vertical-alignment that a standard font displays a basic full-height character, like
H. (It appears you've done this for the most part, since your page looks significantly better than the screenshots in the question.) - Second, you'll notice that if you use a font like Arial, and display an H (at the same font size), it's also low. This is because the built in standard line-height of the fontgives it quite a bit of room above the character. This indicates that you may have some success if you can edit the font to trim this,thereby giving the character enough room to not be trimmed at the bottom by the browser.
- Probably less ideal to you, but still an option, you can use other elements, either in combination with or in place of the
button/submitelement, to get the character into place.
- 首先，确保您的字体以与标准字体显示基本全高字符相同的垂直对齐方式呈现字形，例如
H. （看起来您已经完成了大部分工作，因为您的页面看起来比问题中的屏幕截图要好得多。） - 其次，您会注意到，如果您使用 Arial 之类的字体，并显示 H（以相同的字体大小），则它也很低。这是因为字体的内置标准行高使它在字符上方有相当多的空间。这表明如果你可以编辑字体来修剪它，你可能会取得一些成功，从而为字符提供足够的空间而不被浏览器在底部修剪。
- 对您来说可能不太理想，但仍然是一种选择，您可以使用其他元素，与元素结合或代替
button/submit元素，使角色就位。
Alternative option
替代选项
I'm not sure what your goal is in using CSS fonts, but often it is for some form of progressive enhancement/graceful degradation. In this case, although (as you said in the comments) the special character is a standardized Unicode "right-pointing magnifying glass", it still will not have any meaning to the user if it doesn't render.
我不确定您使用 CSS 字体的目标是什么，但通常是为了某种形式的渐进增强/优雅降级。在这种情况下，尽管（如您在评论中所说）特殊字符是标准化的 Unicode“右指向放大镜”，但如果不呈现，它对用户仍然没有任何意义。
Given that the benefit of graceful degradation is to allow simpler technologies to display your website without appearing broken, the use of this character seems suspect — without CSS fonts or a native font with this character, it will render as
