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

我有一个表格，内置了div元素。默认情况下，元素显示为表格单元格。对@media screen and (max-width: 769px)元素需要变成table-row。窗口中的表格单元格在Safari中调整大小

除Safari之外，每个浏览器都能正常工作。在safari中，它显示出很好的效果，直到我重新调整窗口大小，然后返回全宽。在这一点桌上休息。如果我刷新页面或禁用并重新启用table-cell样式表本身修复。

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

那是Safari浏览器的bug？怎么修？

来源

2014-02-25 Sergej Popov

我有类似的问题铬。我认为这是一个webkit渲染错误。从来没有找到它的修复程序 – Turnip

我在ajax页面上有类似的问题。更改具有display：table-cell的div的内容不会调整表格单元的大小。所以我必须使用jQuery'$（'。col'）.css（'display'，table-cell）重置它;' –

这听起来像你不遵守正确的结构 - 你不应该为table-row换出table-cell，他们有两个明显不同的目的，其不是解释布局方面等同，表结构应始终遵循：

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

您错过了无论是行或细胞水平的方法，所以虽然everythign似乎大部分正确解释，你的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; 
} 

}

来源

2014-02-25 13:24:47 SW4

感谢您指出表结构问题。我最终没有在窄屏幕上使用表格，但我仍然将桌子放在大屏幕上，因为需要跨越整个屏幕宽度的元素。（列的数量不是常数 - 因此使用浮动/内联div不是一个选项） –

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

回答

相关问题