Question

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

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

这一切都很有效，除了在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

我发现这篇帖子是因为几个月前我已经解决了这个问题，今天再次遇到这个问题，我不记得我做了什么。尼斯。在仔细阅读我的CSS后，我终于找到了“修复”。我不能因为我在网上的某个地方找到了它，但希望它对你来说和我一样有用：

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

我希望这会有所帮助。

Answer 2

每次我需要设置表单按钮的样式时，我都会遇到同样的问题。对不起，此刻非常忙，所以只能简单介绍一下我通常如何修复它。

在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中检查过以上所有内容都会将文本移动几个像素。所以它意味着更多（无尽的？）用填充顶部/底部来嘲弄..我现在失去了耐心，我想我将把所有这些放在单独的样式表中，从现在开始直到我找到一些相当简单和通用的解决方案对于所有这些

Answer 3

输入的格式不符合不同浏览器中的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 4

我遇到了同样的问题，我解决了（仅适用于FF和Safari）固定宽度而不是高度并使用值：padding（顶部和底部），line-height以及如果需要设置垂直 - 与中间相对但是，如果以像素为单位设置所有值（甚至是字体大小），则更容易做到。

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

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

Answer 5

您还可以考虑将该按钮替换为完全不同的元素。锚元素完美运作。只需添加“提交”即可。功能于它的on on＆＃39;事件，你会很高兴。我认为这是一个更好（更简单）的跨浏览器解决方案。

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

5 个答案: