1

我正在尝试使用“显示：表格”制作响应列，这就是我想出的。

http://jsfiddle.net/ejkim2000/NXmfk/

html

 <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>

css

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;
}    
}

无论我旋转浏览器的显示还是调整窗口大小，它都适用于 Firefox、IE9 和 Chrome（桌面）。它没有显示任何问题。

但是，它在 Safari(desktop)、Safari(mobile) 和 chrome(mobile) 中表现出非常奇怪的行为。它在开始时显示正确的列，但是一旦我旋转屏幕或调整窗口大小，它基本上会添加一两个空列。如果您使用 safari 调整上面的 jsfiddle 示例的大小，您就会明白这一点，或者这张图片显示了它是如何工作的：

我一直在寻找答案，但似乎没有人和我有同样的问题。

你能帮我解决这个问题吗？

4

0 回答 0