为什么表格单元格高度在火狐浏览器和IE浏览器中显示不正确

Question

我的表格单元格高度在火狐浏览器和IE浏览器中显示不同，它无法识别高度

这里是小提琴

：小提琴

这是 css ：

#gradient-style
{
    font-size: 12px;
    width: 95%;
    text-align: left;
    border-collapse: collapse;        
    border: 1px solid gray;
    border-top: none;
    margin: 2%;
    margin-top: 50px;  
}
#gradient-style thead td
{
    background: gray;              
    border: 1px solid rgba(0,0,0,0.2);
    color: white;
    height: 50px;
    padding: 4px;
    text-align: center;
}
#gradient-style td
{
    padding: 6px; 
    margin: 0;
    border: 1px solid rgba(0,0,0,0.2);
    color: black;
    background: #DCDCDC;        
    vertical-align: middle; 
    text-align: center;
    width: 200px;
    height: 50px; 
}
#gradient-style tbody td:hover 
{
    background: #C0C0C0;
}
.tbl-content{   
    width: 100%;
    height: 600px;
    overflow: auto;
}

Answer 1

尝试在此处删除高度：

.tbl-content{   
    width: 100%;
    /*height:600px; */  
   overflow: auto;
 }

Answer 2

因为您的表格内容的高度为 600px，并且位于正文范围内。像Chrome这样的一些浏览器可能会注意到这是错误的并忽略它，但IE不会纠正这些事情。

.tbl-content{   
    width: 100%;
    height: 200px; /* change this as you see fit */
    overflow: auto;
}