CSS 输入类型=在 Firefox 中提交文本垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1679952/
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
input type=submit text vertical alignment in Firefox
提问by Andrew Bullock
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
我正在尝试设置表单按钮的样式，但在 Firefox 中遇到了一个问题，我无法深入...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
我想让某些<a />s 和<input type="submit" />s 看起来相同（我有一个按钮背景图像，使用滑动门技术来应用悬停效果。）
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
这一切都很好，除了在 Firefox 中，输入提交文本比它应该的略低。IE 和 Safari/Chrome 工作正常。
(source: muonlab.com)
（来源：muonlab.com）
Anyone got any ideas?
有人有任何想法吗？
Thanks
谢谢
<div class="buttons">
<a href="#" class="button btn-small-grey">« Back</a>
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
回答by Shelly Skeens
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
我找到这篇文章是因为几个月前我已经解决了这个问题，当我今天再次遇到它时，我不记得我做了什么。好的。在仔细研究了我的 css 之后，我终于找到了“修复”。我不能相信，因为我在网上某个地方找到了它，但希望它对你和我一样有用：
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
我希望这有帮助。
回答by spirytus
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
每次我需要为表单按钮设置样式时，我都会遇到同样的问题。抱歉，目前很忙，所以只简要说明我通常如何修复它。
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
在 FF 文本中通常有点低，就像你附加的图像一样，所以我只是在按钮本身上应用“padding-bottom”。它将按钮上的文本向上移动像素数。
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
问题是它也在 IE 中移动文本，现在 IE 看起来有点不对劲。为了解决这个问题，我将“line-height”应用到同一个按钮，其值与按钮的高度完全相同。这使得 IE 完全忽略填充并将文本定位在中间。下面是示例 HTML 代码：
<input type="submit" value="SEARCH" class="search"/>
and CSS:
和 CSS：
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
抱歉，我没有直接将它应用到您的代码中，但目前我有点忙，希望您能理解并有所帮助。
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
附：刚刚在 IE8 中检查，上面的所有内容都将文本向上移动了几个像素。所以这意味着更多（无休止的？）用填充顶部/底部嘲笑......虽然我现在失去了耐心，我想我将从现在开始将所有这些放在单独的样式表中，直到我找到一些相当简单和通用的解决方案对于这一切
回答by Mohammad
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
输入的格式不遵循不同浏览器中的 W3 盒模型约定，您可能希望包括：
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
还包括 Firefox（雪莉指出）：
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
否则你可以使用按钮
I collected all these solutions from various sources, they deserve the credit
我从各种来源收集了所有这些解决方案，它们值得称赞
回答by BitDrink
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
我遇到了同样的问题，我已经解决了（仅适用于 FF 和 Safari），方法是固定宽度而不是高度并使用以下值：填充（顶部和底部）、行高以及如果需要将垂直对齐设置为中间。但是，如果您以像素为单位设置所有值（甚至字体大小），则更容易做到。
EDIT:I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button. Even if with this solution you lose in accessibility.
编辑：我认为没有跨浏览器的解决方案，因为问题出在浏览器的文本呈现上。要完全解决问题，您可以使用文本绘制背景 img 并将该图像应用于链接或按钮。即使使用此解决方案，您也会失去可访问性。
Alternatively you can use conditional CSS statements to improve the layout for each browser.
或者，您可以使用条件 CSS 语句来改进每个浏览器的布局。
回答by Yega
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.
您还可以考虑用完全不同的元素替换按钮。锚元素完美地工作。只需在它的“onClick”事件中添加一个“提交”功能，您就可以开始使用了。我认为这是一个更好（也更简单）的跨浏览器解决方案。
