我为 div 提供了少量 (-7px
) 的负边距,以使文本与其旁边的图像对齐。
根据一些媒体查询,div 有一些不同的大小。一切正常,除了最大的尺寸,出于某种原因,它添加了一个小滚动条并且负边距突然被剪掉了。
我不知道为什么会这样?
即使为父级添加高度也无济于事,滚动条仍然出于某种原因出现?
对于我来说,我也无法在 jsbin 中重新创建它,所以我想知道是否有人对可能导致滚动条/剪辑突然出现的原因有任何提示?
编辑
对延迟表示歉意,花了一些时间来删除所有无关的内容,但这里有一个工作测试可以证明这个问题。
如果您“缩小”或使窗口变大,您会突然看到标题被剪裁。强制 overflow: visible
也什么都不做。肯定是发生了一些奇怪的事情,导致滚动条也突然出现。
这是演示该问题的视频。我的浏览器缩小到 75% 以模拟更大的屏幕。我在 Mountain Lion 上使用 Chrome 30.0.1599.22。
最佳答案
回答你的问题:
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 但是,当我用您的代码尝试它们时,它们似乎不起作用。
关于html - 负边距元素仅在一种情况下被剪裁在 div 之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18643773/