ff和chrome中的输入框分隔css不同答案

【问题标题】：inputbox seperation css different in ff and chromeff和chrome中的输入框分隔css不同
【发布时间】：2014-06-10 05:06:37
【问题描述】：

这件事让我很恼火。我使用了一个 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;
}

有人可以指点我正确的方向吗？

【问题讨论】：

标签： html css google-chrome firefox

【解决方案1】：

明确地为您的输入提供自己的边距。 css 重置代码甚至没有解决输入元素。如果您真的想重置所有内容，为什么不这样做：

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

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

【讨论】：

【解决方案2】：

对输入元素使用特定的Css重置：input {margin:0;padding:0;display:block;}

【讨论】：