Home >Web Front-end >HTML Tutorial >CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:531135browse
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码:
固定悬浮在网页一侧的效果应用非常的频繁，尤其是客服系统或者公告系统，CSS提供了position:fixed属性即可实现此功能，但是IE6浏览器并不支持，虽然IE6的用户越来越少，但是毕竟还是有用户在使用，所以最好还是要实现兼容效果，下面就是一段能够兼容所有浏览器的代码实例，希望能够给需要的朋友带来帮助。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">* { padding:0; margin:0;}#fixedLayer { width:100px; line-height:50px; background:#FC6; border:1px solid #F90; position:fixed; right:10px; bottom:10px;}#content{ width:100px; height:1000px; margin:0px auto; background:red;}</style><!--[if lte IE 6]> <style type="text/css"> html { height:100%; overflow:hidden; } body { height:100%; overflow:auto; } #fixedLayer { position:absolute; } </style> <![endif]--></head><body><div id="content"></div><div id="fixedLayer">蚂蚁部落</div></body></html>
以上代码实现了我们的要求，能够使div块悬浮在网页一侧，并兼容所有浏览器。
相关阅读:
1.position属性可以参阅CSS的position属性一章节。
2.的作用一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11581
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery和CSS3堆叠卡片样式导航菜单特效_html/css_WEB-ITnoseNext article：CSS如何设置连接<a>的样式_html/css_WEB-ITnose