html - 即使应用了 reset.css，不同浏览器的输出也不同

Question

它是内联样式，为什么不同的浏览器对同一个站点的呈现方式不同？

这是CSS片段

.label-input, .label-input label, .label-input input , .label-input select , .label-input span {
float: left;
display: inline;
margin-left: 5px;
}

.label-input{
margin-right:5px;
}

.label-input label{
line-height: 25px;
display: inline-block;
width: 118px;
}

.label-input select{
margin-right: auto;
}

here is the jsfiddle

Answer 1

float 元素后需要使用clearfix。在每一行之后，您需要应用 clearfix。

CSS:

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

HTML:

// Row
<div>
    // Floated Div 1
    <div></div>
    // Floated Div 2
    <div></div>
    // ...
    // ...
    <div class="clearfix"></div>
</div>

// Row
<div>
    // Floated Div 1
    <div></div>
    // Floated Div 2
    <div></div>
    // ...
    // ...
    <div class="clearfix"></div>
</div>

另外，如果能使用Normalize.css就更好了:http://necolas.github.io/normalize.css/它为所有浏览器重置 CSS，并且维护良好。