Firefox和IE在Chrome中看起來有所不同

Question

我想成為的樣式是Chrome，但在Firefox和IE中看起來卻有所不同。 我的所有字段都浮動在右側，但字段“名稱”除外。 關於浮動嗎？ 我的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重置{保證金：0; 填充：0; 邊界：0; outline：0;}因為每個瀏覽器都有其自己的邊距，所以填充...