我不确定这个错误是仅适用于Firefox还是适用于基于WebKit的浏览器,但它真的非常烦人.
我有一个CMS界面的模板/框架,在一些宽度为100%的元素上使用了box-shadow.由于这会在元素的右侧产生阴影,因此会出现滚动条.为了隐藏丑陋的滚动条,我在body元素和包装器div 上设置了"overflow:hidden" .
这会导致一些奇怪的行为.虽然没有任何滚动条,但当我使用触摸板(水平滚动)滚动时,页面仍会向右滚动.我已经尝试了很多地狱并用谷歌搜索了我的屁股,但我似乎无法找到解决方案.
有人知道解决问题吗?或者这仅仅是css3 box-shadow冲突实现的一个例子?
我有一个网站,其中包含以下设置:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
Run Code Online (Sandbox Code Playgroud)
当内容不足时,我使用clearfooter和容器外部的页脚将页脚保持在页面底部.
我的问题是我想以下列方式在容器div上应用一个盒子阴影:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px;
margin:0px auto 0px auto;}
Run Code Online (Sandbox Code Playgroud)
正如你可以看到它在容器div的每一侧都有一个阴影.然而,在这样做时,当内容没有占据整个高度时,由于模糊,阴影推动经过页脚的底部仍然存在滚动条.
有没有办法防止阴影越过容器div的边缘并导致滚动条?
谢谢你的帮助!