html - 隐藏的溢出不适用于 firefox，但适用于 IE 和 chrome

Question

我正在做一个网上商店。因为每个页面都有不同数量的产品，所以我的侧边栏有多种长度。

我用它来解决现在的问题:

padding-bottom:     5000px;
margin-bottom:      -5000px;
overflow:           hidden;

在 IE 和 Chrome 中，此解决方案有效。但前几天我在 Firefox 上试过了......但它不起作用。

我尝试了 overflow-x: hidden 和 overflow-y: hidden 但都不起作用。

这是我的侧边栏 CSS:

.sidebar {
z-index:            9;
position:           absolute;
top:                25%;
bottom:             0;
left:               0;
width:              15%;
background:         #C6A970;
height:             100%;
padding-bottom:     5000px;
margin-bottom:      -5000px;
overflow:           hidden;
}

有人为我提供解决方案吗？提前致谢!

Answer 1

溢出隐藏并非在所有情况下都有效。通常需要固定宽度或需要供应商特定的前缀，例如-moz-overflow:hidden.

特别是 Firefox 和 Android 浏览器在使用此解决方案时存在问题，我强烈建议尝试使用其他方法，例如 clip 或 rect 来构建固定大小的框架。

http://www.w3schools.com/cssref/pr_pos_clip.asp

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}