解决firefox下有滚动条时页面抖动问题

LMS
折腾
1.4K+ 3

晚上瞎逛，在吹衣轻飏博客，看到这个问题的解决方法，不知道是不是有用，但是怕到时候遇到了不记得，所以满转载一下。

在firefox中，默认页面不超过一页是没有滚动条的，加入页面中某些元素会临时改变页面高度，比如用了toolTip之类的提示小工具，就会出现滚动条时有时无， 导致页面抖动。解决方法是 CSS里加：

body{overflow: -moz-scrollbars-vertical;}

搞定。

另外我还在ta的博客上看到了一个好玩的东西：通过对CSS border的运用来实现纯CSS圆角、箭头、三角形、多边形等形状，我看了源代码，没有完全搞懂，居然在ie下都有效果，很是神奇。

抓图：css

一并将整个demo的代码转了：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS圆角 箭头 三角形 多边形 — CSS border的运用</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">

#demo1{position: relative;margin: 50px;width: 200px;}
#demo1 s{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #6cf #6cf transparent transparent;border-width: 15px;border-style:solid solid dashed dashed ;}

#demo1 b{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #fff #fff transparent transparent;border-width: 15px 5px;border-style: solid solid dashed dashed;}
.rc_top{height: 0;overflow: hidden;border-color: transparent transparent #6cf;border-width: 3px;border-style: dashed dashed solid;border-top: 0;}
.rc_btm{height: 0;overflow: hidden;border-color: #6cf transparent transparent;border-width: 3px;border-style: solid dashed dashed;border-bottom: 0;}
.rc_bd{height: 100px;padding: 10px;background: #6cf;color: #333;}

#demo2{width: 0;height: 0;margin: 60px;border-color: transparent transparent #f60;border-style: dashed dashed solid;border-width: 0 30px 50px 120px;}

#demo3{margin: 60px;}
#demo3 s{display: block;width: 86px;height: 0;overflow: hidden;border-color: transparent transparent #c6f;border-style: dashed dashed solid;border-width: 0 50px 86px; }
#demo3 b{display: block;width: 86px;height: 0;overflow: hidden;border-color:#c6f transparent transparent ;border-style: solid dashed dashed;border-width:  86px 50px 0; }

</style>
</head>

<body>

<div id="demo1">
        <div class="rc_top"></div>
        <div class="rc_bd">
        锦瑟无端五十弦
        </div>
        <s></s>
        <b></b>
        <div class="rc_btm"></div>
</div>

<div id="demo2">

</div>

<div id="demo3">
        <s></s>
        <b></b>
</div>
</body>
</html>

是不是很神奇。

THE END

评论 3

  1. 那个抖动问题有个DEMO就好了

发表评论

Submit