Я пытаюсь использовать подход Flexible Box для интерфейса для своего приложения. Почти все работает достаточно, но я столкнулся с определенной ошибкой, которая действительно беспокоит некоторых моих пользователей.Работа над таблицей Internet Explorer Render Bug с малыми ширинами с помощью Flexbox
Когда пользователь просматривает данные в Internet Explorer 11, в маленьком окне IE не отображает ячейки в таблице (а не элемент DIV с display: table-cell;, но элементы в действительном элементе таблицы) правильно. В некоторых случаях 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 для борьбы с этой странностью.
Это не решает все проблемы, но я добавить сценарий на стороне клиента, чтобы применить 'cellpadding' атрибут нагрузки и, казалось, чтобы помочь. Итак, я не думаю, что я должен принять это как ответ, но все равно +1 от меня. – palswim
@palswim достаточно справедливо. Какие проблемы вы все еще видите? Я не видел каких-либо странных проблем с заполнением или калибровкой после добавления 'cellpadding =" 0 "' в таблицу. –