在 Safari 中调整窗口大小时表格单元格中断

Question

我有一个由div 元素构建的表格。默认情况下，元素显示为表格单元格。 在@media screen and (max-width: 769px) 上的元素需要变成table-row。

除 Safari 外，所有浏览器都可以正常工作。 在 safari 中它显示得很好，直到我将窗口重新调整为非常窄然后返回全宽。那时桌子坏了。如果我刷新页面或禁用并重新启用table-cell 样式表会自行修复。

示例： http://jsfiddle.net/sergejpopov/TvEWf/

这是 Safari 的错误吗？如何解决？

Answer 1

听起来您没有遵循正确的结构-您不应该将table-cell 换成table-row，它们有两个截然不同的目的，在解释布局方面并不等同，表格结构应该永远跟随：

table (display-table)
 row (display-row) <- important to denote a row of elements
  cell (display-cell) <- important to denote (column based) content within a row
  /cell
 /row
/table

您的方法遗漏了行或单元格级别，因此尽管在大多数情况下似乎一切都正确解释了，但您的 css 实际上是错误的。

我建议您考虑使用浮动或内联 div，请参阅

FIDDLE

HTML

<div class="t">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

CSS

*{
    box-sizing:border-box;
}
.t
{
    width:100%;
}

.t>div
{
    border:1px solid red;
    display:inline-block;
    width:25%;
    margin:0;
    padding:0;
    zoom:1;
}


@media screen and (max-width: 769px) {
.t
{
    width:100%;
    display:table;
}

.t>div
{
    border:1px solid red;        
    display: block;
        width:100%;
    zoom:1;
}

}