2

我正在使用 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/

这个空格来自哪里，我该如何删除它？

4

2 回答 2

3

根据这个页面，

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 的处理。见新小提琴。
（注意：文章提到了顶部和底部，但它也适用于左右填充。）

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

于 2013-02-04T18:03:42.683 回答
0

你可以给它一个宽度值。

于 2013-02-04T17:40:35.330 回答