0

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

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

我不知道为什么会这样？

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

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

编辑

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

如果您“缩小”或使窗口非常大，您会突然看到航向剪裁。强迫overflow: visible也无济于事。肯定发生了一些奇怪的事情，导致滚动条也突然出现。

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

4

4 回答 4

2

要回答您的问题：

什么可能导致滚动条/剪辑突然出现？

这是由这个 CSS 引起的：

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

确切地说，它是由overflow-x: hidden;

根据这个答案，W3C 规范说：

'overflow-x' 和 'overflow-y' 的计算值与它们的指定值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是 'scroll'或“自动”，然后“可见”设置为“自动”。

以下是可能的解决方案：CSS 溢出-x 隐藏和溢出-y 可见 但是，当我使用您的代码尝试它们时，它们似乎不起作用。

于 2013-09-08T11:41:59.997 回答
0

一些示例 html/css 将帮助我们回答您的问题，但如果滚动条导致负边距被剪裁，为什么不直接隐藏 div 上的溢出以防止滚动条呈现？

div
   {
   overflow-y:hidden;
   }
于 2013-09-05T19:11:33.683 回答
0

华夫饼。

所以，这是你的错误的根源=）

@media (min-width: 2088px)
body.catalog-product-view .col-center {
    overflow-x: hidden; /* this makes scroll visible and the text being cutted */
}
于 2013-09-08T11:42:11.490 回答
0

在 CSS 中试试这个：

body { max-width: 200%;
}

div { width: 170%; }

如果您以百分比值定义宽度，则一切都将是可调整的。

于 2013-09-08T12:09:26.630 回答