Question

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

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

出于某种原因，在iPad上，网格在错误的地方打破，看起来很糟糕。

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

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

谢谢！

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

Answer 2

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

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

ul {
  letter-spacing: -0.31em;
}

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

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

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

内联块无法在iPad上运行

2 个答案: