内联块在 iPad 上不起作用答案

【问题标题】：Inline-block not working on iPad内联块在 iPad 上不起作用
【发布时间】：2013-06-25 20:27:40
【问题描述】：

我使用 Codrops 教程和我自己的知识构建了一个网格布局。使用display:inline-block; 和nth-child 设置网格以从最后一个元素中删除填充，这样它们就不会中断到下一行。随着网格大小的变化，我在媒体查询中使用不同的 nth-child 来删除最后一个元素的填充，无论是第三个元素、第二个元素还是第一个元素。

一切都在所有桌面浏览器中运行良好，但在 iPad 上不运行。

由于某种原因，在 iPad 上，网格在错误的位置中断，这看起来很糟糕。

我不知道从哪里开始测试这个错误，因为它在缩小浏览器窗口时可以正常工作。我已经尝试使用 iOS 模拟器进行一些测试，但无济于事。然而，有趣的是，在初始页面加载时网格工作正常，然后一旦完全加载，网格就会中断。

您可以在此处查看问题（在 iPad 上）：http://www.eugeniacameronfoster.com/new/paintings/

谢谢！

【问题讨论】：

我在这个页面上找不到一个页面，但我还是给你留下了一些答案。

标签： ipad mobile responsive-design mobile-safari grid-layout

【解决方案1】：

CSS Tricks article points out 有几个问题。

基本上，您需要删除网格中 div 之间的空间，而不是

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

你需要放

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

我会投票让你放弃内联块的想法，选择flexbox 或box-sizing: border-box;

【讨论】：

【解决方案2】：

有一种不需要更改 html 标记的解决方法。

在父 ul 上使用 -0.31em 的负字母间距，然后重置 li 中的字母间距，lis 之间的空格消失。

ul {
  letter-spacing: -0.31em;
}

li {
  letter-spacing: normal;
  display: inline-block;
}

可以在这里看到一个例子：http://jsfiddle.net/c67U4/

这个技巧特别适用于使用内联块而不是浮动元素的 PureCSS 网格。

【讨论】：