即使应用了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

浮动元素后需要使用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，并且维护得很好。

Answer 2

float: left;
display: inline;

这会导致下一个div在有空格时进入前一行。删除它们可以解决问题。顺便提一下，不同浏览器的字体大小会有所不同，因此请确保为不同的浏览器在一行中显示足够的空间。

Answer 3

我添加了clear：标签输入字段的两个属性。现在它在浏览器上都能正确显示。

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