Question

我正在尝试使用“display：table”创建响应列，这就是我想出来的。

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（桌面），Safari（移动）和chrome（移动）的非常奇怪的行为。它在开头显示正确的列，但是一旦我旋转屏幕或调整窗口大小，它基本上会添加一个或两个空列。如果你使用safari重新调整上面的jsfiddle示例，你会得到这个想法，或者image显示它是如何做的：

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

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

响应列（显示：表格）不适用于Safari，Safari（移动）和Chrome（移动）

0 个答案: