html - 输入框分离 css 在 ff 和 chrome 中不同

Question

这件事让我非常恼火。我使用了 html 重置 css 代码并添加了我的 2 个不同输入框的简单代码，一个在另一个下面，chrome 和 ff 中的总间距不同。

chrome 的空间有点宽，而 ff 和 ie 的输入框之间的空间为 0。

这是效果图

http://jsfiddle.net/LLsyw/

这是它的html部分

<div id="div2">

<div class='input'>
<input type='text' />
</div>
<div class='input' >
<input type='text' class='second' placeholder='data'/>
</div>

</div>

这是CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

有人能给我指出正确的方向吗。

Answer 1

明确地为您的输入提供自己的 margin 。 css 重置代码甚至不处理输入元素。如果你真的想重置一切，为什么不这样做:

* {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

通过在重置中使用不完整的列表，浏览器可以为未列出的元素选择自己的默认值。