5

带有链接、输入（提交）和跨度的网页。所有的样式都具有相同的外观，实际上输入的样式与超链接和跨度具有相同的外观。

测试使用：Firefox 3.0、3.6、4.0、14.0.1

出于某种原因，输入比其他输入稍大。此外，输入的文本与链接和跨度的文本不对齐。这是一个现场演示。

http://jsfiddle.net/LGftW/

这是我的CSS：

a{
    text-decoration:none;
}

input[type="submit"]{
    border:0 none;
    background:transparent;
}

a, input[type="submit"], span{
    border:solid 1px green;
    font-size:64px;
    font-family:Arial;
    font-weight:bold;
    float:left;
    padding:0;
    margin:0;
}

标记：

<a href="#">LINK</a>
<input type="submit" value="INPUT" />
<span>SPAN</span>

那么我怎样才能让输入看起来像一个普通的链接或跨度呢？是浏览器的奇怪行为还是我错过了一些 CSS？我已经解决了一天了。

编辑

似乎该问题仅发生在 Firefox 中。IE8-9 和 Chrome 显示正确。

4

1 回答 1

6

input::-moz-focus-inner通过在您的 CSS中使用来删除 Firefox 中的按钮填充：

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

已编辑：使用上述代码更新了演示链接。

在 Firefox 中查看演示

于 2012-07-26T05:50:39.323 回答