inputtypes=在Firefox中提交文本垂直alignment
我试图风格我的表单button，我遇到了一个问题，我不能深入到底部的Firefox …
我想对某些<a /> <input type="submit" /> s和<input type="submit" /> s进行样式devise（我有一个button背景图像，使用滑动门技术来应用hover效果）。
这一切都很好，除了在Firefox中，input的提交文本略低于应该的值。 IE和Safari / Chrome工作正常。
替代文字http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png
任何人有任何想法？
谢谢
<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(/assetshttp://img.dovov.combuttons/buttons-small.gif); } .btn-large-green { height: 27px; width: 175px; background-position: 0px -54px; background-image: url(/assetshttp://img.dovov.combuttons/buttons-large.gif); }
我发现这篇文章是因为几个月前我已经解决了这个问题，当我今天再次遇到这个问题时，我不记得我做了什么。 尼斯。 仔细研读我的CSS后，我终于find了“修复”。 我不能拿信誉，因为我发现它在网上的某个地方，但希望它会像你一样对我有用：
input::-moz-focus-inner /*Remove button padding in FF*/ { border: 0; padding: 0; }
我希望这有帮助。
每次我需要样式表单button时，我都有同样的问题。 对不起，目前相当繁忙，所以只简要说明我通常如何修复它。
在FF文本通常是低一点，就像你附加的图像，所以然后我只是应用“填充底部”的button本身。 它将button上的文字button向上移动。
问题是它也在IE中移动文本，现在IE看起来有点closures。 为了解决这个问题，我将“line-height”应用于与button高度完全相同的button。 这使得IE浏览器完全忽略填充并将文本置于正确的位置。 以下是示例HTML代码：
<input type="submit" value="SEARCH" class="search"/>
和CSS：
.search { background: transparent url(..http://img.dovov.comsprites.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 */ }
对不起，我没有把它直接应用到你的代码，但我现在有点忙，希望你有这个想法，但它有帮助。
PS。 只是在IE8中检查，以上所有移动文本几个像素了。 所以这意味着更多（无休止的）嘲笑填充顶部/底部..我现在失去了耐心，我想我会把所有这一切在现在的独立样式表，直到我find一个相当简单和通用的解决scheme所有这一切
input格式不符合不同浏览器中的W3框模式约定，您可能需要包括：
input /*Content follows box model*/ { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height:24px; }
还包括火狐（Shelly指出）：
input::-moz-focus-inner /*Remove button padding in FF*/ { border: 0; padding: 0; }
否则，你可以使用button
我从各种来源收集了所有这些解决scheme，他们值得信任
我有同样的问题，我已经解决了（只适用于FF和Safari）通过固定宽度，而不是高度和打值：填充（顶部和底部），行高，如果需要设置垂直alignment中间。 但是，如果将像素中的所有值（即使是字体大小）都设置为更容易。
编辑：我认为，没有一个跨浏览器的解决scheme，因为问题是由于浏览器的文本呈现。 为了完全解决这个问题，你可以用文本来绘制背景图像，并将该图像应用到链接或button。 即使使用这种解决scheme，您将失去可访问性。
或者，您可以使用条件CSS语句来改进每个浏览器的布局。
你也可以考虑用一个不同的元素完全replacebutton。 锚元素完美地工作。 只需在“onClick”事件中添加“提交”function即可。 我认为这是一个更好（更简单）的跨浏览器解决scheme。
