Firefox和IE在Chrome中看起来不同

Question

我想要的样式是在Chrome中，但它在Firefox和IE中看起来不同。除了字段“name”之外，我的所有字段都向右浮动。它是关于漂浮？  我的Chrome：

我的Firefox和IE：

除了“状态”之外还有一个巨大的空间，标题看起来也更高。

=== CSS ====

.column-name { margin: 2px; width: 40%; }
.column-priority { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-severity { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-status { float: right; margin: 2px; width: 100px;}

=== HTML ====

   <div class="results-header ">
        <div class="column-status" value="status">Status<span class="sort jive-icon-sml"></span></div>  
        <div class="column-severity" value="severity">Severity<span class="sort jive-icon-sml"></span></div>
        <div class="column-priority" value="priority">Priority<span class="sort jive-icon-sml jive-icon-arrow-generic-down"></span></div>   
        <div class="column-name"  value="name" >Name</div>
    </div>

Answer 1

我99％肯定是因为你需要告诉它有哪些填充因为那些浏览器具有更高的优先级。

您可以制作明星规则

*{margin:0; padding:0;}

但在我告诉你100％做什么之前，你需要再发布更多代码。顺便说一句，如果您对浏览器的兼容性有任何不确定性，请参阅：http://www.quirksmode.org/css/contents.html

Answer 2

始终使用css重置{margin：0;填充：0;边界：0;大纲：0;} 因为每个浏览器都有自己的边距，填充......