Question

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

除Safari外，每个浏览器都能正常运行。在野生动物园中它显示正常，直到我重新调整窗口非常窄，然后回到全宽。那时桌子休息了。如果我刷新页面或禁用并重新启用table-cell样式表修复本身。

实施例： http://jsfiddle.net/sergejpopov/TvEWf/

这是一个Safari bug吗？怎么解决？

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

}

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

1 个答案: