如果我在Safari 7中反复缩小和扩展窗口使其经过@media断点，则显示为表格单元格的列表项显示在两行，三行，四行或更多行上。人们会期望他们迅速恢复到只有一条线。这里发生了什么？
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
@media (min-width: 768px) {
.nav > li {
display: table-cell;
width: 1%;
}
}
</style>
</head>
<body>
<ul class="nav">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>
屏幕快照位于http://imgur.com/a/bEie8
添加display: table;到<ul>元素。当您具有未嵌套在表格中的单元格时，Safari不会喜欢它，此外，这样做确实更有意义（至少对我而言）。
您也可以将设置为<ul>以display: inline;获得相同的效果（它使元素在块格式化上下文中工作），但是您也可以使用该表。:-)
您可能还需要考虑将单元格包装成行。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句