Question

这个小提琴

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

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

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

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

它在哪里？

按钮的高度比输入框大2px或更大，我预计它的高度会小2px。

base，Firefox和Safari有什么区别？

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

由于

参考：

SO Similar Issue - Safari

W3 Box Model

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

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

3 个答案: