Question

我正在使用CSS使输入按钮看起来像一个链接。

我的风格是这样的：

input#linkLike {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    display: inline;
    vertical-align: baseline;
}

这在Chrome中运行良好，但Ff中的按钮周围有空格，IE中的空格更大。

http://jsfiddle.net/S4nF9/5/

这个空白来自何处，如何将其删除？

Answer 1

根据this page，

Firefox使用按钮元素本身内的伪元素进行绘制。如您所见，这意味着2px的填充被添加到此内部伪元素的顶部和底部，因此可以按如下方式删除：

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important; 
}

这就是Firefox的照顾。见new fiddle。
（注意：文章提到了顶部和底部，但它也适用于左右填充。）

我这里没有IE，所以我现在无法测试，抱歉。

Answer 2

你可以给它一个宽度值。

输入按钮在FF和IE中被设置为链接

2 个答案: