溢出隐藏在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;
}

有人为我提供解决方案吗？ Thanx提前！

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);
}