使用 Flexbox 解决 Internet Explorer 表格呈现小宽度的错误
Posted
技术标签:
【中文标题】使用 Flexbox 解决 Internet Explorer 表格呈现小宽度的错误【英文标题】：Work Around Internet Explorer Table Render Bug with Small Widths with Flexbox 【发布时间】：2017-05-31 21:19:48 【问题描述】：我一直在尝试对我的应用程序的接口使用灵活盒方法。几乎所有的都运行得很好，但我遇到了一个真正困扰我的一些用户的特定错误。
当用户在 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 输出没有高度控制，因为我使用的是第 3 方工具.因此，我想知道是否存在 CSS 解决方法来应对这种奇怪现象。
【问题讨论】：
【参考方案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>【讨论】：
这并没有解决所有问题，但我确实添加了一些客户端脚本以在 Load 上应用cellpadding 属性，这似乎有所帮助。所以，我认为我不应该接受这个作为答案，但仍然是我的 +1。
@palswim 很公平。你还看到什么问题？将cellpadding="0" 添加到表格后，我没有看到任何奇怪的填充或大小问题。以上是关于使用 Flexbox 解决 Internet Explorer 表格呈现小宽度的错误的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox 在 Internet Explorer 11 中不起作用
Internet Explorer 不会使用 flex-direction: column 展开 flexbox
CSS：Firefox/Internet Explorer 中 flexbox 的图像缩放问题
Internet Explorer - Flexbox 图像比例