Question

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

这是小提琴：Fiddle

这是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;
}

为什么在Firefox和IE浏览器中没有正确显示表格单元格高度？

2 个答案: