Home > Web Front-end > HTML Tutorial > CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:30:53
Original
1141 people have browsed it

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>
Copy after login

 

以上代码实现了我们的要求,能够使div块悬浮在网页一侧,并兼容所有浏览器。
相关阅读:
1.position属性可以参阅CSS的position属性一章节。
2.的作用一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11581

更多内容可以参阅:http://www.softwhy.com/divcss/

 

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template