显示的神秘负边距:内联块元素

Question

我真的很沮丧为什么会发生这种情况.http://syndex.me上的帖子的边距为2px.当页面最初加载时,这是坚持的.当第二批帖子加载时(14个帖子下载)你会看到由于一些奇怪的原因,右边的帖子实际上比它们应该短2px.

Weirder仍然,检查帖子显示他们实际上设置了一个margin:2px 甚至更奇怪,这只发生在左边缘或右边缘,而不是顶部和底部(？!)

做了前端很长一段时间后,我非常有信心这是一个奇怪的案例.

我在firefox,safari和chrome上遇到了这个渲染问题.

如果我使用检查员滚动帖子,我可以看到每个帖子确实有2px的保证金,只是第二个帖子(右边)的边距开始,就好像它旁边的帖子有零保证金,但是它也确实有一个.

好像帖子忽略了他们的邻居左右边缘？

有一点,帖子正在使用display:inline-block.我不明白的是:为什么这种行为只会在延迟加载后启动？我知道内联元素的自然空间为2到4像素,但这忽略了 2px,看起来很奇怪.

我不知道从哪里开始看这个,任何帮助将不胜感激.

Answer 1

首次加载页面时,每个页面之间都有HTML空格<div class="post">.每个空白块都呈现为一个空格字符(通常为4px宽).<div class="post_margin_adjustment">用它来抵消这个margin-right: -4px,所以最初的帖子之间的差距是8px:

  4px (margin-right from the left post)  
+ 4px (space character)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 8px

当Infinite Scroll插件加载下一页时,它会抓取新div.post元素并将它们插入到页面中,而不会显示空格.所以新帖子之间的差距是4px:

  4px (margin-right from the left post)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 4px

这就是为什么新职位之间的差距比初始职位之间的差距要窄.

要解决这个问题,我会:

1. 删除初始帖子之间的空格:

   $('div.post').detach().appendTo('#posts');
   

   在页面就绪/加载,它模拟无限滚动插件正在做什么.

2. margin-right: -4px;从中移除.post_margin_adjustment.

现在,初始和新职位之间的差距应该是8px宽.