嵌套在 display:table 单元格中时,IE 不会删除 css 多列
IE doesn't drop css multi-columns when nested in display:table-cell
在我的项目中,我有一个 display:table-cell
包含一个 css 多列列表。调整容器大小时,我希望 table 的大小适合其父级宽度,并且 table-cell 在调整父级大小时扩展和收缩以适应父级容器。我希望多列列表随着容器宽度的缩小而删除列。这适用于 Firefox、Chrome 和 Safari,但不适用于 IE10+。
给出以下 HTML:
<div class="outer-container">
<div class="inner-container">
<div class="left-cell"></div>
<div class="list-container">
<ul class="columnized-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
</div>
以及以下 css:
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
.outer-container {
border: 1px solid green;
width: 100%;
}
.inner-container {
display: table;
border: 1px solid black;
}
.left-cell {
display: table-cell;
border: 1px dashed blue;
min-width: 5rem;
max-width: 5rem;
}
.list-container {
display: table-cell;
border: 1px dashed red;
}
.columnized-list {
-webkit-columns: 3 10rem;
-moz-columns: 3 10rem;
columns: 3 10rem;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
我希望列表列在 window 缩小时从 3 减少到 2 再到 1。 Firefox、Safari 和 Chrome 的行为都符合我的预期。但是,IE 10+ 不会删除列。
我知道我不是唯一遇到这种情况的人。评论者 Todd 在 CSS-Tricks 描述了 the same issue.
我想我可以理解为什么 table-cell 正在扩展以填充内容,而 IE 不知道它是否应该缩小列表列或扩展 table 单元格。
正确的行为是什么? IE 正确吗?还是所有其他浏览器? CSS 规范是否指定了这种情况下的行为?
更重要的是,如何让 table and/or 单元格适合 table 的容器?
JSFiddle http://jsfiddle.net/kentho_98/y5bdLsgo/9/
更新 增加了一些要求。
如果您给 display: table-cell
一个 min-width
IE11 中的列/边缘中断。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.outer-container {
border: 1px solid green;
width: 100%;
}
.inner-container {
display: table;
border: 1px solid black;
width: 100%;
}
.left-cell {
display: table-cell;
border: 1px dashed blue;
min-width: 5rem;
max-width: 5rem;
}
.list-container {
display: table-cell;
border: 1px dashed red;
max-width: calc(100vw - 5rem);
}
.columnized-list {
-webkit-columns: 3 10rem;
-moz-columns: 3 10rem;
columns: 3 10rem;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
<div class="outer-container">
<div class="inner-container">
<div class="left-cell"></div>
<div class="list-container">
<ul class="columnized-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
</div>
在我的项目中,我有一个 display:table-cell
包含一个 css 多列列表。调整容器大小时,我希望 table 的大小适合其父级宽度,并且 table-cell 在调整父级大小时扩展和收缩以适应父级容器。我希望多列列表随着容器宽度的缩小而删除列。这适用于 Firefox、Chrome 和 Safari,但不适用于 IE10+。
给出以下 HTML:
<div class="outer-container">
<div class="inner-container">
<div class="left-cell"></div>
<div class="list-container">
<ul class="columnized-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
</div>
以及以下 css:
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
.outer-container {
border: 1px solid green;
width: 100%;
}
.inner-container {
display: table;
border: 1px solid black;
}
.left-cell {
display: table-cell;
border: 1px dashed blue;
min-width: 5rem;
max-width: 5rem;
}
.list-container {
display: table-cell;
border: 1px dashed red;
}
.columnized-list {
-webkit-columns: 3 10rem;
-moz-columns: 3 10rem;
columns: 3 10rem;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
我希望列表列在 window 缩小时从 3 减少到 2 再到 1。 Firefox、Safari 和 Chrome 的行为都符合我的预期。但是,IE 10+ 不会删除列。
我知道我不是唯一遇到这种情况的人。评论者 Todd 在 CSS-Tricks 描述了 the same issue.
我想我可以理解为什么 table-cell 正在扩展以填充内容,而 IE 不知道它是否应该缩小列表列或扩展 table 单元格。
正确的行为是什么? IE 正确吗?还是所有其他浏览器? CSS 规范是否指定了这种情况下的行为?
更重要的是,如何让 table and/or 单元格适合 table 的容器?
JSFiddle http://jsfiddle.net/kentho_98/y5bdLsgo/9/
更新 增加了一些要求。
如果您给 display: table-cell
一个 min-width
IE11 中的列/边缘中断。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.outer-container {
border: 1px solid green;
width: 100%;
}
.inner-container {
display: table;
border: 1px solid black;
width: 100%;
}
.left-cell {
display: table-cell;
border: 1px dashed blue;
min-width: 5rem;
max-width: 5rem;
}
.list-container {
display: table-cell;
border: 1px dashed red;
max-width: calc(100vw - 5rem);
}
.columnized-list {
-webkit-columns: 3 10rem;
-moz-columns: 3 10rem;
columns: 3 10rem;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
<div class="outer-container">
<div class="inner-container">
<div class="left-cell"></div>
<div class="list-container">
<ul class="columnized-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
</div>