我一直在尝试使用Flexible Box方法来连接我的应用程序。几乎所有工作都充分，但我遇到了一个特别的错误，真的困扰了我的一些用户。
当用户在Internet Explorer 11中查看数据时，在一个小窗口中，IE不显示表中的单元格（不是具有display: table-cell;的DIV元素，而是实际TABLE元素中的元素）正确。在某些情况下，IE将呈现与同一行中的其他单元格不同高度的表格单元格。我模拟了这个环境in a JSFiddle：
<html>
<head>
<title>Grid Test</title>
<style type="text/css">
div.Sizer {
display: flex;
flex-flow: column;
flex: 0 0 auto;
height: 333px;
width: 444px;
}
div.Wrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
div.ScrollWrap {
flex: 1 1 auto;
flex-basis: 50px;
overflow-x: auto;
overflow-y: auto;
}
.ScrollWrap .Contents {
border-collapse: collapse;
}
.Contents td {
border: 1px solid;
}
</style>
</head>
<body>
<div class="Sizer">
<div class="Wrapper">
<div class="ScrollWrap">
<table class="Contents">
<tbody>
<tr>
<td>a</td><td>0 - F2 aaaaa aaaa</td><td>0 - F3 aaa aaa aaaaaa aaaaaaa aaaaaaa aaaaaaa</td><td>0 - F4 aaaaa aaaaaaa aaaaaaa aaaaaa</td><td>0 - F5 aaaaaa aaaaaa aaaaa aaaaaa</td>
</tr>
<tr>
<td>a</td><td>1 - F2 aaaa aaaaaaa aaaa aaaaa aaa aaaaa aaaaaa</td><td>1 - F3 aaaaaa aaaaa aaaaaa aaaa aaaa aaaaa aaaaaaa aaa</td><td>1 - F4 aaaaa aaaaaaa aaaaaa</td><td>1 - F5 aaaaaaa aaaaaaa aaaaa aaaaa aaaaaaa aaaaaaa aaaaaa</td>
</tr>
<tr>
<td>a</td><td>2 - F2 aaa aaaaaaa aaaa aaa</td><td>2 - F3 aaaaaa aaaaaa aaa aaa aaa aaaaa aaa aaa aaa</td><td>2 - F4 aaaaa aaa aaaaaa aaaa</td><td>2 - F5 aaaa aaaaa aaa aaaaaa aaa aaaaaaa aaaaa aaa aaaaaa</td>
</tr>
<tr>
<td>a</td><td>3 - F2 aaa aaaaa aaaaaaa aaaaa aaaaaa aaaaaa aaaaa aaa aaaaa</td><td>3 - F3 aaa aaaaaaa aaa aaaaa aaaa aaaaa aaaaa aaaaaa</td><td>3 - F4 aaaaaaa aaaa aaaa aaaaaa aaaaaaa aaa</td><td>3 - F5 aaaaaa aaaaa aaa aaaaaaa aaaa aaaaaa</td>
</tr>
<tr>
<td>a</td><td>4 - F2 aaa aaaaaaa aaaaaaa aaaa aaaaaa</td><td>4 - F3 aaaaa aaa aaaaaaa aaa aaaaa</td><td>4 - F4 aaaaa aaaa aaaaaa aaaa aaaaa aaaaa aaaaaa aaaaa</td><td>4 - F5 aaaaaa aaaaaaa aaaaaaa aaa aaaaa aaa aaaaaaa aaaaaaa</td>
</tr>
<tr>
<td>a</td><td>5 - F2 aaaaa aaaaa</td><td>5 - F3 aaaa aaa aaaaaa aaaa aaaa</td><td>5 - F4 aaaa aaaaaaa aaaaaaa aaaa aaaa aaa aaa aaaaaa aaaa</td><td>5 - F5 aaaa aaaaaa</td>
</tr>
<tr>
<td>a</td><td>6 - F2 aaaaa aaaa aaaaaa aaaaa aaaaaaa aaa</td><td>6 - F3 aaa aaaa aaaaaa</td><td>6 - F4 aaaaaaa aaaaa aaaaaaa</td><td>6 - F5 aaa aaaa aaaaaaa aaaaaaa</td>
</tr>
<tr>
<td>a</td><td>7 - F2 aaaaa aaaaa aaaaa</td><td>7 - F3 aaaa aaaaaa aaaaaaa aaa aaaaaaa aaaaaaa aaaaaaa aaaaaa aaaaa</td><td>7 - F4 aaa aaaa</td><td>7 - F5 aaaaa aaaaaa aaaa aaa aaaaaa aaaaaaa aaaa</td>
</tr>
<tr>
<td>a</td><td>8 - F2 aaaaa aaaaaa aaaa aaaaaa aaaaa aaaaaaa aaa</td><td>8 - F3 aaaaa aaa aaaaaaa aaaaaa</td><td>8 - F4 aaa aaaa aaa aaa aaaa aaaaa aaaaaa</td><td>8 - F5 aaaaa aaaaa aaaaaa aaa aaaa</td>
</tr>
<tr>
<td>a</td><td>9 - F2 aaaa aaaaaa aaaaaaa aaaaaa aaaaaa aaa aaaa</td><td>9 - F3 aaaaaaa aaaaa aaaa aaaa aaaaaaa aaaaaaa aaaaa aaa</td><td>9 - F4 aaa aaaaa</td><td>9 - F5 aaaaa aaaa aaa aaa aaaa aaaa aaaaaa aaa aaa</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
我发现如果我删除其中一个包装器DIV元素，我的特定样本似乎正确显示，但不幸的是，我没有对HTML输出的高度控制，因为我使用的是第三方工具。因此，我想知道是否存在一种解决这种奇怪问题的CSS解决方法。
答案 0 :(得分：1)
我不确定根本原因是什么，但看起来像是cellpadding的错误或冲突。添加td { padding: 0; }（或某些显式值，如5px）或将表格标记更改为<table class="Contents" cellpadding="0">似乎可以解决此问题。 https://jsfiddle.net/6e4LL498/1/
div.Sizer {
display: flex;
flex-flow: column;
flex: 0 0 auto;
height: 333px;
width: 444px;
}
div.Wrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
div.ScrollWrap {
flex: 1 1 auto;
flex-basis: 50px;
overflow-x: auto;
overflow-y: auto;
}
.ScrollWrap .Contents {
border-collapse: collapse;
}
.Contents td {
border: 1px solid;
}<div class="Sizer">
<div class="Wrapper">
<div class="ScrollWrap">
<table class="Contents">
<tbody>
<tr>
<td>a</td>
<td>0 - F2 aaaaa aaaa</td>
<td>0 - F3 aaa aaa aaaaaa aaaaaaa aaaaaaa aaaaaaa</td>
<td>0 - F4 aaaaa aaaaaaa aaaaaaa aaaaaa</td>
<td>0 - F5 aaaaaa aaaaaa aaaaa aaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>1 - F2 aaaa aaaaaaa aaaa aaaaa aaa aaaaa aaaaaa</td>
<td>1 - F3 aaaaaa aaaaa aaaaaa aaaa aaaa aaaaa aaaaaaa aaa</td>
<td>1 - F4 aaaaa aaaaaaa aaaaaa</td>
<td>1 - F5 aaaaaaa aaaaaaa aaaaa aaaaa aaaaaaa aaaaaaa aaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>2 - F2 aaa aaaaaaa aaaa aaa</td>
<td>2 - F3 aaaaaa aaaaaa aaa aaa aaa aaaaa aaa aaa aaa</td>
<td>2 - F4 aaaaa aaa aaaaaa aaaa</td>
<td>2 - F5 aaaa aaaaa aaa aaaaaa aaa aaaaaaa aaaaa aaa aaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>3 - F2 aaa aaaaa aaaaaaa aaaaa aaaaaa aaaaaa aaaaa aaa aaaaa</td>
<td>3 - F3 aaa aaaaaaa aaa aaaaa aaaa aaaaa aaaaa aaaaaa</td>
<td>3 - F4 aaaaaaa aaaa aaaa aaaaaa aaaaaaa aaa</td>
<td>3 - F5 aaaaaa aaaaa aaa aaaaaaa aaaa aaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>4 - F2 aaa aaaaaaa aaaaaaa aaaa aaaaaa</td>
<td>4 - F3 aaaaa aaa aaaaaaa aaa aaaaa</td>
<td>4 - F4 aaaaa aaaa aaaaaa aaaa aaaaa aaaaa aaaaaa aaaaa</td>
<td>4 - F5 aaaaaa aaaaaaa aaaaaaa aaa aaaaa aaa aaaaaaa aaaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>5 - F2 aaaaa aaaaa</td>
<td>5 - F3 aaaa aaa aaaaaa aaaa aaaa</td>
<td>5 - F4 aaaa aaaaaaa aaaaaaa aaaa aaaa aaa aaa aaaaaa aaaa</td>
<td>5 - F5 aaaa aaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>6 - F2 aaaaa aaaa aaaaaa aaaaa aaaaaaa aaa</td>
<td>6 - F3 aaa aaaa aaaaaa</td>
<td>6 - F4 aaaaaaa aaaaa aaaaaaa</td>
<td>6 - F5 aaa aaaa aaaaaaa aaaaaaa</td>
</tr>
<tr>
<td>a</td>
<td>7 - F2 aaaaa aaaaa aaaaa</td>
<td>7 - F3 aaaa aaaaaa aaaaaaa aaa aaaaaaa aaaaaaa aaaaaaa aaaaaa aaaaa</td>
<td>7 - F4 aaa aaaa</td>
<td>7 - F5 aaaaa aaaaaa aaaa aaa aaaaaa aaaaaaa aaaa</td>
</tr>
<tr>
<td>a</td>
<td>8 - F2 aaaaa aaaaaa aaaa aaaaaa aaaaa aaaaaaa aaa</td>
<td>8 - F3 aaaaa aaa aaaaaaa aaaaaa</td>
<td>8 - F4 aaa aaaa aaa aaa aaaa aaaaa aaaaaa</td>
<td>8 - F5 aaaaa aaaaa aaaaaa aaa aaaa</td>
</tr>
<tr>
<td>a</td>
<td>9 - F2 aaaa aaaaaa aaaaaaa aaaaaa aaaaaa aaa aaaa</td>
<td>9 - F3 aaaaaaa aaaaa aaaa aaaa aaaaaaa aaaaaaa aaaaa aaa</td>
<td>9 - F4 aaa aaaaa</td>
<td>9 - F5 aaaaa aaaa aaa aaa aaaa aaaa aaaaaa aaa aaa</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>