Question

我给div一小部分（-7px）负边距，以便将文字与旁边的图片对齐。

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

我不知道为什么会这样？

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

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

修改

对延迟道歉，花了一段时间去除所有无关的内容，但这是一个证明问题的工作测试。

如果你'缩小'或使窗口非常大，你可以突然看到标题剪辑。强制overflow: visible也没有做任何事情。绝对会发生奇怪的事情，导致滚动条突然出现。

以下是展示此问题的视频。我的浏览器缩小到75％以模拟更大的屏幕。我在Mountain Lion上使用Chrome 30.0.1599.22。

Answer 1

回答你的问题：

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

这是由CSS引起的：

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

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

引起的

根据this answer，W3C规范说：

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

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

Answer 2

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

div
   {
   overflow-y:hidden;
   }

Answer 3

waffl。

所以，这是你的bug的根源=）

@media (min-width: 2088px)
body.catalog-product-view .col-center {
    overflow-x: hidden; /* this makes scroll visible and the text being cutted */
}

Answer 4

在CSS中尝试：

body { max-width: 200%;
}

div { width: 170%; }

如果以百分比值定义宽度，则所有内容都可以调整。

仅在一种情况下，负边距元素被截断在div之外？

4 个答案: