输入类型=在 Firefox 中提交文本垂直对齐

Question

我正在尝试设置表单按钮的样式，但在 Firefox 中遇到问题，我无法深入了解...

我想设置某些<a />s 和<input type="submit" />s 的样式，使其看起来相同（我有一个按钮背景图片，使用滑动门技术来应用悬停效果。）

这一切都很好，除了在 Firefox 中，输入提交文本比它应该的略低。 IE 和 Safari/Chrome 运行良好。

_{（来源：muonlab.com）}

有人有什么想法吗？

谢谢

<div class="buttons">
    <a href="#" class="button btn-small-grey">&laquo 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);
}

Answer 1

输入的格式不遵循不同浏览器中的 W3 框模型约定，您可能需要包括：

input /*Content follows box model*/
{ 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    height:24px;
}

还包括用于 firefox（Shelly 指出）：

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

否则你可以使用按钮

我从各种来源收集了所有这些解决方案，他们值得称赞

Answer 2

您还可以考虑将按钮替换为完全不同的元素。锚元素完美地工作。只需在它的“onClick”事件中添加一个“提交”功能，就可以了。我认为这是一个更好（更简单）的跨浏览器解决方案。

Answer 3

我遇到了同样的问题，我已经解决了（仅适用于 FF 和 Safari），方法是固定宽度而不是高度并使用以下值：填充（顶部和底部）、行高，如果需要设置垂直-对齐到中间。但是，如果您以像素为单位设置所有值（甚至是字体大小），则一切都会变得更容易。

---

编辑：我认为没有跨浏览器的解决方案，因为问题是由于浏览器的文本呈现。要完全解决问题，您可以使用文本绘制背景图像并将该图像应用于链接或按钮。 即使使用此解决方案，您也会失去可访问性。

您也可以使用条件 CSS 语句来改进每个浏览器的布局。

Answer 4

我发现这篇文章是因为几个月前我已经解决了这个问题，当我今天再次遇到它时，我不记得我做了什么。好的。在仔细研究了我的 css 之后，我终于找到了“修复”。我不能相信，因为我在网上某个地方找到了它，但希望它对你和对我一样有用：

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

我希望这会有所帮助。

Answer 5

每次我需要设置表单按钮的样式时都会遇到同样的问题。抱歉，目前很忙，所以只简要描述一下我通常如何解决它。

在 FF 中，文本通常有点低，与您附加的图像完全一样，所以我只需在按钮本身上应用“padding-bottom”。它将按钮上的文本向上移动像素数。

问题是它也会在 IE 中移动文本，现在 IE 看​​起来有点不对劲。为了解决这个问题，我将“line-height”应用于同一个按钮，其值与按钮的高度完全相同。这使得 IE 完全忽略填充并将文本定位在中间。以下是示例 HTML 代码：

<input type="submit" value="SEARCH" class="search"/>

和 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 */
}

抱歉，我没有将它直接应用到你的代码中，但我现在有点忙，希望你明白这一点，但它会有所帮助。

ps。刚刚在 IE8 中检查，以上所有内容都将文本向上移动了几个像素。所以这意味着更多（没完没了？）用填充顶部/底部来嘲笑..我现在失去了耐心，我想从现在开始我会把所有这些放在单独的样式表中，直到我找到一些相当简单和通用的解决方案对于这一切