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

Question

对于这个小提琴

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

我相信正在发生的是不同的浏览器对我不知道我正在使用的属性有不同的默认值。

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

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

它在哪里？

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

base、Firefox 和 Safari 有什么区别？

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

谢谢

参考：

如此类似的问题 - Safari

W3 盒子模型

Answer 1

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

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

Answer 2

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

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;
}