HTML/CSS表在Internet Explorer中的高度不同於Chrome

Question

我試圖用html，css，javascript創建一個heatmap。 我在Chrome中使所有工作都完美無缺。在Internet Explorer中，表格單元格高出3-4倍，所以表格看起來很奇怪。下面的圖片顯示了它在Chrome中的外觀。

這張圖片是從Internet Explorer

這是我的CSS。

table { 
    tr th { 
     vertical-align: middle; 

     &.xLabel { 
     text-align: center; 
     } 
     &.yLabel { 
     text-align: right; 
     } 

    } 

    tr { 

     td { 
     color: white; 
     text-align: center; 
     vertical-align: middle; 
     height: 30px; 
     } 

    } 
} 

有沒有人有解決方案的想法？

Answer 1

這可能是由於默認屬性，因瀏覽器而異。

，以便根據需要應該覆蓋儘可能多的人（似乎即使在這裏，他們不給不同[參見下面的註釋）：font-family，font-size，line-height，padding，margin ...以及其他一切我不現在不用擔心了。

注意：不僅瀏覽器的默認屬性可能不同，而且用戶偏好可能會以任何方式覆蓋它們。
所以你應該強制執行全部可能涉及的屬性即使你的測試沒有顯示任何差異。