[英]Different 100% height of table in Chrome/IE and FireFox
问题在于,所有元素(主容器,表容器和表本身)必须具有100%的高度。 在Chrome和IE中,表格本身的尺寸要比Firefox中的尺寸稍小,这会导致.table-container与表格边框之间的间隙很小。
有人知道如何解决这个问题吗? 我花了整整一整天的时间,无法简单地找到解决方案。 将不胜感激。
<div class="container">
<div class="buttons">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
</tbody>
</table>
</div>
</div>
和CSS:
html, body, .container, .table-container, table
{
height: 100%;
}
.container
{
display: block;
width: 500px;
margin: 0 auto;
text-align: center;
}
.table-container
{
width: 100%;
border: 1px solid red;
padding-top: 30px;
margin-top: -30px;
}
.buttons
{
height: 30px;
}
.buttons div
{
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 25%;
float: left;
height: 30px;
border: 1px solid black;
}
table
{
border: 1px solid black;
width: 100%;
border-spacing: 0;
}
thead td, tbody td
{
width: 25%;
height: 25%;
}
更新 :为.table-container添加了填充和负边距
Update2 :在示例中添加了border-spacing和border-collapse。 仍然无法正常工作。
Update3 :现在它可以在这里工作了,这意味着,我无法完全重现我的bug来向您展示它:(但是,总的来说,问题是,Chrome中5x5表格的高度小于22px上的FF,是表格容器与表格本身之间的22px间距,每个单元格在Firefox中的表格高度约为4px +。
它似乎是表格上的边框间距。
将此CSS应用于table元素:
border-spacing: 0;
意识到
width: 100%;
不能以完全相同的方式工作
height: 100%;
确实。
虽然width:100%会抓住父对象宽度的100%,即使没有显式设置宽度,height:height:100%仅对父对象具有固定高度的元素起作用。
简而言之,%-width动态地应用,而%-height适用于静态父容器的高度。
我之所以来到这里,是因为我在Chrome和Firefox的桌面高度不同时遇到相同的问题。 解决方法是在表格中添加边框。 您也可以添加border-bottom-bottom,它实际上不会显示在Chrome中,但可以解决高度问题。
table
{
**border-bottom: 1px solid black;**
width: 100%;
border-spacing: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.