响应列(显示:表格)不适用于Safari,Safari(移动)和Chrome(移动)

时间:2013-09-09 00:55:09

标签: css responsive-design safari multiple-columns css-tables

我正在尝试使用“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显示它是如何做的:

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

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

0 个答案:

没有答案