使用 FireFox 的 CSS 计算中缺少 4px+

Question

为了这个小提琴

http://jsfiddle.net/hNx6E/13/

我认为不同的浏览器对我不知道我正在使用的属性有不同的默认值。

这令人沮丧。当您检查 HTML 时，默认值不可见，属性也不可见。

是否有浏览器的默认属性列表，尤其是 FireFox 和 Safari？

它在哪里？

按钮的高度比输入框大 2px 或更大，而我希望它的高度小 2px。

base、Firefox 和 Safari 有什么区别？

我需要了解这些差异是什么，而不仅仅是用大量 CSS 重置代码来掩盖它们。

谢谢

参考：

SO Similar Issue - Safari

W3 Box Model

Answer 1

浏览器将自己的行高应用到您的按钮。添加line-height:16px; 解决了这个问题。 http://jsfiddle.net/hNx6E/20/

Answer 2

如果您将宽度/高度与填充/边框混合，也许您可​​以尝试调整框大小。它会强制浏览器采用宽度/高度值。

http://css-tricks.com/box-sizing/

Answer 3

每个浏览器都有一些默认样式，我们应该首先使用 CSS RESET 覆盖它们，然后根据我们的样式设置样式。

在样式表的开头添加此代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}