html - CSS 布局中的奇怪 heisenbug

Question

好的，我有一个非常奇怪的 CSS 问题，我想知道任何人都可以提出解释。

重现步骤:

打开 Chrome 并导航到 http://www.mcwhinneys.com/media 照片库应该没有对齐，向右偏移大约 50-70 像素 在 chrome 中打开开发者控制台

预期结果:

我这样做是为了检查 css，希望看到为什么图像偏到一边，修复 css 并继续。

实际结果:

当开发者工具打开时，图片库会对齐。

有人知道为什么会这样吗？当我检查它时，CSS 似乎没问题，但在打开控制台之前它肯定无法正确呈现。

Answer 1

嗯，错误布局的实际原因是 ngg-gallery-thumbnail-box 上的 text-align: center 的组合(我称之为box 从现在开始)与 position: absolute + display: inline-block 在内部 ngg-gallery-thumbnail(我将其称为拇指)。

它是这样的:

• 我们将 text-align: center 应用于 box。这将导致它使其内联子元素居中。它(概念上)通过将每个 child 的左边缘放置在当前“文本光标”位置(重要的是，从 box 的中心开始)，然后将其向左移动以“重新居中”来做到这一点“它。这也是 - 同样重要的 - box 的“工作”。

• 我们将 thumb 声明为 inline-block。这将(除其他事项外)使其遵循其父级的 text-align，这意味着 - 在这个时间点 - 它居中。

• 然后我们声明thumb position: absolute。这会将它从流程中移出，将其左边缘定位在同一点 它最初所在的位置 - 因为我们没有指定 left/right.

对此的“天真”解释是它仍然位于盒子的中心，一切都会好起来的，但是我们得到了“副作用”......

• 因为我们将 thumb 移出了流程，box 不再有任何内联内容，这意味着它的文本光标位于中心，而且它没有不需要居中任何东西。它的“工作”完成了。

• 但由于 thumb 是行内 block ，它的原始位置仍然基于 box 的文本光标位置( center), 这意味着当我们让它成为 position: absolute 时，它的左边缘将被放置在那个中心。它没有在 box 内水平居中，因为从 box 的 Angular 来看，它的流中没有需要居中的子元素。 p>

这是先有鸡还是先有蛋的问题，因此 Chrome 在为控制台重新呈现页面时似乎会感到困惑。

这个解释也可能有点困惑，但你可以在这里看到结果 - 即使在这个简单的例子中，Chrome 的控制台也会在你尝试检查它时进行回流。在此示例中，它甚至似乎足以在不打开控制台的情况下调整窗口大小 (v17.0.963.56):

http://jsfiddle.net/h66Gj/

据我所知，它首先呈现它的方式是它“本应如此”的方式(上次我检查时，W3C 的建议对此含糊不清，但至少 Firefox 同意预先检查渲染)。

有很多方法可以解决这个问题，我最喜欢的是只使用 text-align: center 来居中……文本，并尝试使用例如margin: auto 使其他内容居中。