相关疑难解决方法(0)

Firefox和CSS3:使用overflow:hidden和box-shadow

我不确定这个错误是仅适用于Firefox还是适用于基于WebKit的浏览器,但它真的非常烦人.

我有一个CMS界面的模板/框架,在一些宽度为100%的元素上使用了box-shadow.由于这会在元素的右侧产生阴影,因此会出现滚动条.为了隐藏丑陋的滚动条,我在body元素包装器div 上设置了"overflow:hidden" .

这会导致一些奇怪的行为.虽然没有任何滚动条,但当我使用触摸板(水平滚动)滚动时,页面仍会向右滚动.我已经尝试了很多地狱并用谷歌搜索了我的屁股,但我似乎无法找到解决方案.

有人知道解决问题吗?或者这仅仅是css3 box-shadow冲突实现的一个例子?

css firefox css3

13
推荐指数
3
解决办法
1万
查看次数

容器div上的CSS框阴影会导致滚动条

我有一个网站,其中包含以下设置:

<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的边缘并导致滚动条?

谢谢你的帮助!

css scrollbar shadow clip

7
推荐指数
1
解决办法
7967
查看次数

标签 统计

css ×2

clip ×1

css3 ×1

firefox ×1

scrollbar ×1

shadow ×1