0
私はアプリケーションへのインターフェイスにFlexible Boxアプローチを使用しようとしています。ほぼすべてが十分に機能していますが、私は一部のユーザーを悩ませる特定のバグに遭遇しました。Internet Explorerの周囲で作業Flexboxで小さな幅のテーブルレンダリングのバグ
ユーザーがInternet Explorer 11のデータを小さなウィンドウで表示しているとき、Internet Explorerはテーブル内のセルを表示しません（display: table-cell;のDIV要素ではなく、実際のTABLE要素内の要素）。状況によっては、IEは同じ行の他のセルとは異なる高さのテーブルセルをレンダリングします。私はラッパーDIV要素の一つ取り除くが、残念ながら、私は以上の高度な制御を持っていない場合、私の特定のサンプルが正しく表示されているようだということを発見した
<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>
：私はこの環境in a JSFiddleをシミュレートしています私はサードパーティのツールを使用しているので、HTML出力。したがって、私はCSSの回避策がこの奇妙に対抗するために存在するかどうか疑問に思っています。
これがすべてを解決していないが、私はロードに 'cellpadding'属性を適用するには、いくつかのクライアント側のスクリプトを追加しましたし、役立つように見えました。だから、私はこれを答えとして受け入れるべきではないと思っていますが、私からはまだ+1です。 – palswim
@palswim十分な公正。あなたはまだ何の問題を見ていますか？ 'cellpadding =" 0 "'をテーブルに追加した後、奇妙なパディングやサイジングの問題は見られませんでした。 –