0

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

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

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

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

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

谢谢！

4

2 回答 2

2

CSS Tricks 文章指出了一些问题。

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

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

你需要把

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

我会投票让你放弃 inline-block 的想法并使用flexbox或box-sizing: border-box;

于 2013-06-29T13:39:05.280 回答
0

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

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

ul {
  letter-spacing: -0.31em;
}

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

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

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

于 2013-10-29T13:17:54.367 回答