输入框分离css在ff和chrome方面有所不同

时间:2013-12-05 20:07:35

标签: html css3 google-chrome firefox

这件事激怒了我很多。香港专业教育学院使用html重置CSS代码,并添加了我的简单代码2个不同的输入框一个在另一个下面,铬和ff的总间距,即不同。

chrome的空间有点宽,而ff和输入框之间有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;
}
有人可能会指出我正确的方向。

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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