内联块不能在iPad上工作

Question

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

所有桌面浏览器中的所有功能都会有所增加，但在iPad上无法使用。

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

我不知道从哪里开始测试这个错误，因为它在缩放浏览器窗口时工作正常。我试过用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网格。