9

我真的很困惑为什么会这样。http://syndex.me上的帖子有 2px 的边距。当页面最初加载时，这是遵守的。当第二批帖子加载时（14 个帖子开始加载），您会看到出于某种奇怪的原因，右侧的帖子实际上比应有的短 2px。

更奇怪的是，检查帖子显示它们实际上设置了一个margin:2px 更奇怪的是，这只发生在左边或右边距，而不是顶部和底部（？！）

做了很长一段时间的前端，我很有信心这是一个奇怪的案例。

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

如果我使用检查器翻转帖子，我可以看到每个帖子确实有 2px 边距，只是第二个帖子的边距（右侧）开始时好像旁边的帖子的边距为零，但是它确实也有一个。

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

一件事，帖子正在使用display:inline-block. 我不明白的是：为什么这种行为只在延迟加载后才会出现？而且我知道内联元素有 2 到 4 px 的自然空间，但这忽略了2px，看起来很奇怪。

我不知道从哪里开始寻找这个，任何帮助将不胜感激。

4

4 回答 4

10

首次加载页面时，HTML 中每个<div class="post">. 每个空白块都被渲染为一个空格字符（通常为 4px 宽）。<div class="post_margin_adjustment">用它来抵消这一点margin-right: -4px，所以初始帖子之间的差距是 8px：

  4px（从左帖到右边距）  
+ 4px（空格字符）  
- 4px（从左 post_margin_adjustment 开始的负边距）  
+ 4px（从右帖到左边距）  
= 8像素

当 Infinite Scroll 插件加载下一页时，它会抓取新div.post元素并将它们插入到页面中，没有空格。所以新帖子之间的差距是4px：

  4px（从左帖到右边距）  
- 4px（从左 post_margin_adjustment 开始的负边距）  
+ 4px（从右帖到左边距）  
= 4像素

这就是为什么新职位之间的差距比初始职位之间的差距更窄的原因。

为了解决这个问题，我会：

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

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

    在页面准备/加载上，它模拟了无限滚动插件正在做的事情。

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

初始帖子和新帖子之间的差距现在都应该是 8px 宽。

于 2012-05-31T16:01:10.233 回答
4

首先，此 SO Answer 是对Zuul在此页面上提供的 SO Answer 的补充。我无法编辑他的答案，或者同行评审过程无论出于何种原因都不起作用。

已为 SO 问题提供了可靠和/或官方来源。

参考：“根据检查员的计算风格不可能是在说一件事，但在视觉上它在做另一件事吗？ ”

在这种情况下， Firefox内置了一个用于 CSS 的 3D 查看器。它显示图像已正确加载但margin-right正在产生问题的揭示信息。让我通过为您的金头盔照片拍摄的图像来说明这一点。

第一个图像通过虚线显示了在它自己的容器中加载的图像。但是请注意，图像本身延伸到右侧的虚线之外： 边距错误.jpg


第二张图片是使用Firefox 3D 查看器 的特写。在这里，您可以通过显示的蓝色底部看到原始容器正确放置在页面上。这表明该onload过程尊重了与右侧图像的正确 CSS 距离。虽然右上角的文字很模糊，但有一个勾选标记margin-rightin use of -4px： cssRespectedOnload.jpg


这张最终照片带有已margin-right删除的复选标记。请注意，照片现在正确显示： removeMarginOffset.jpg


使用3D Viewer for CSS 时，可以使用 Firefox 复制上述内容。

新：您可以右键单击每个图像并选择view image查看更大的版本。

于 2012-06-04T20:25:57.987 回答
3

如果我的问题正确，通过使用 Firebug 分析带有 FF12.0 的页面，我看到：

.post_margin_adjustment {
    margin-right: -4px;
}

那就是将左侧的帖子拉到右侧，从而导致布局不尊重您的：

.index .post {                                         /* syndex.me (line 469) */
  margin: 4px;
}

删除负边距似乎可以解决问题。

笔记：

你在说margin:2px，但我在当前的 css 上看到的是margin:4px;，所以，帖子之间的总数是8px如果修复了否定的问题margin。

刚刚使用了“web developer 1.1.9”中的“标尺”，8px当否定margin被禁用时它会给我！

最后一件事也弄乱了保证金声明是：

.index .post {                                          /* syndex.css (line 1) */
  line-height: 0;
}

该声明导致图像被拉起，从而减少了顶部/底部帖子之间的空间。

禁用此选项可修复顶部/底部间距，允许通过margin:4px.

于 2012-05-30T23:21:08.143 回答
1

您的 AJAX 检索内容缺少样式表似乎依赖的空格。证明：预加载一些动态帖子，检查页面，将 body 元素编辑为 HTML 。您会看到静态帖子之间有足够的空白（可能过多），而动态帖子则粘在一起。

解决方案一：在附加动态帖子的脚本中添加一些空格。

解决方案二：避免依赖 css 中的空格，并使用替代方法从 inline-block 元素中删除空格。

IMO 最好使用#2 的总体方向。

于 2012-06-04T01:12:16.680 回答