html - 负边距元素仅在一种情况下被剪裁在 div 之外？

Question

我为 div 提供了少量 (-7px) 的负边距，以使文本与其旁边的图像对齐。

根据一些媒体查询，div 有一些不同的大小。一切正常，除了最大的尺寸，出于某种原因，它添加了一个小滚动条并且负边距突然被剪掉了。

我不知道为什么会这样？

即使为父级添加高度也无济于事，滚动条仍然出于某种原因出现？

对于我来说，我也无法在 jsbin 中重新创建它，所以我想知道是否有人对可能导致滚动条/剪辑突然出现的原因有任何提示？

编辑

对延迟表示歉意，花了一些时间来删除所有无关的内容，但这里有一个工作测试可以证明这个问题。

如果您“缩小”或使窗口变大，您会突然看到标题被剪裁。强制 overflow: visible 也什么都不做。肯定是发生了一些奇怪的事情，导致滚动条也突然出现。

这是演示该问题的视频。我的浏览器缩小到 75% 以模拟更大的屏幕。我在 Mountain Lion 上使用 Chrome 30.0.1599.22。

Answer 1

回答你的问题:

what could be causing the sudden appearance of a scrollbar/clipping?

这是由这个 CSS 引起的:

body.catalog-product-view .col-center {
    overflow-x: hidden;
    width: 1800px !important;
}

准确的说是overflow-x: hidden;

引起的

根据 this answer ，W3C 规范说:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

以下是可能的解决方案:CSS overflow-x hidden and overflow-y visible但是，当我用您的代码尝试它们时，它们似乎不起作用。