Css 响应列（显示：表格）不'；t使用Safari、Safari（移动）和Chrome（移动）
我正试图用“display:table”来制作响应性列，这就是我所想到的 html 无论我是旋转浏览器的显示还是调整窗口大小，它都能很好地与Firefox、IE9和Chrome（桌面）配合使用。它没有显示出任何问题 然而，它在Safari（桌面）、Safari（移动）和chrome（移动）上表现出非常奇怪的行为。它在开始时显示适当的列，但一旦我旋转屏幕或调整窗口大小，它基本上会添加一个或两个以上的空列。如果您使用safari调整我上面的JSFIDLE示例的大小，您就会明白这一点，或者这显示了它是如何做到的： 我一直在寻找答案，但似乎没有人和我有同样的问题Css 响应列（显示：表格）不'；t使用Safari、Safari（移动）和Chrome（移动）,css,responsive-design,safari,multiple-columns,css-tables,Css,Responsive Design,Safari,Multiple Columns,Css Tables,我正试图用“display:table”来制作响应性列，这就是我所想到的 html 无论我是旋转浏览器的显示还是调整窗口大小，它都能很好地与Firefox、IE9和Chrome（桌面）配合使用。它没有显示出任何问题 然而，它在Safari（桌面）、Safari（移动）和chrome（移动）上表现出非常奇怪的行为。它在开始时显示适当的列，但一旦我旋转屏幕或调整窗口大小，它基本上会添加一个或两个以上的空列。如果您使用safari调整我上面的JSFIDLE示例的大小，您就会明白这一点，或者这显示了它
你能帮我解决这个问题吗 我可以确认，在尝试运行responsive
display:table cellli <body>
<section id="colors">
<ul id="columns">
<li class="red">red</li>
<li class="yellow">yellow</li>
<li class="blue">blue</li>
</ul>
</section>
</body>
body { height: 100%;
width: 100%;
background-color: #ccc;
}
#colors {
display:block;
overflow:hidden;
position:relative;
height: 1000px;
width: 100%;
}
#columns {
height: 100%;
width: 100%;
display: table;
}
#columns li {
overflow:hidden;
width: 33.33%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
@media only screen and (min-width: 479px) {
#colors {
height: 320px;
width: 100%;
}
#columns li {
display: table-cell;
}
}
@media only screen and (min-width: 768px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-row;
}
}
@media only screen and (min-width: 980px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-cell;
}
}