Question

我试图将输入更改为与锚标记完全相同，但由于某种原因，在文本开始之前左侧有1 / 2px的间隙。顶部还有1 / 2px的差距。

知道这些差距来自哪里？

（我删除了填充，边距和边框）。

在safari和firefox上完全相同的问题。

Answer 1

嗯，文本输入的html元素的默认样式因浏览器而异。如果你想在所有浏览器上看起来相同，你必须确保在你的CSS中覆盖它们中的所有内容。对于每个主要的浏览器，您都有某种检查工具，这样当您右键单击页面中的元素时，它会为您提供“检查”选项，该选项可以准确显示该事物具有的css属性。对于chrome和safari，这是构建它。对于firefox安装firebug插件。对于ie8 +安装开发工具栏。

Answer 2

以下是<input type="button" />显示与<a>元素相同的最佳结果

example jsfiddle

Safari，Chrome和IE似乎都与以下内容合作得很好：

input[type="button"], a {
    margin:0;
    padding:0;
    border:0;
    cursor:pointer;
    font:12px/15px Helvetica, Arial, sans-serif;
    color:blue;
    text-decoration:underline;
}

然而，Firefox（我使用6.0.1）需要更多技巧：

input[type="button"] {
    line-height:15px!important;
}

input[type="button"]::-moz-focus-inner { 
    border:0; 
    padding:0; 
}

此-moz-focus-inner似乎是元素周围额外间距的罪魁祸首，border和padding都在内部浏览器样式表中设置（goto resource：// gre-resources在FF的/forms.css中查看样式表）

那说Firefox仍然在文本上面生成了1个额外的像素，我无法弄清楚如何删除，但是当切换按钮或锚时没有行高度变化意味着父div没有改变高度由于切换元素时这个1px。

文本输入的默认样式是什么？

2 个答案: