Safari 7 中的 CSS 布局问题答案

【问题标题】：CSS layout issues in Safari 7Safari 7 中的 CSS 布局问题
【发布时间】：2014-02-27 08:50:12
【问题描述】：

如果我在 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

【问题讨论】：

标签： html css safari media-queries

【解决方案1】：

将display: table; 添加到<ul> 元素。 Safari 不喜欢当您的单元格没有嵌套在表格中时，而且这样做更有意义（至少对我而言）。

您也可以将<ul> 设置为display: inline; 以获得相同的效果（它使元素在block formatting context 中工作），但您也可以选择表格。 :-)

您可能还需要考虑将单元格包装成行。

Here a link to the docs 在显示表属性上。

【讨论】：

就是这样。谢谢！（这确实有道理；我想我只是认为 Safari 会像推断行一样推断表格 - 显然不是！）