`

HTML 纯CSS浮窗兼容IE6+

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 纯CSS浮窗兼容IE6+</title>
<style>
/* body容器设置 */
body {
	/* IE6中需要为body添加如下两个样式属性,才能完美实现固定浮动 */
	_background-attachment: fixed;
	_background-image: url(about:blank);
}

/* 固定浮动 */
.fix-top {
	position: fixed;
	_position: absolute; /* 兼容IE6 */
	right: 0;
	bottom: 20px;	
	z-index: 99;
	/* 兼容IE6,_top属性的表达式可能根据浮动的位置不同而所有不同,请自行更改 */
	_bottom: auto;
	_top: expression( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - 20 );
	
	/*浮窗的样式*/
	width: 40px;
	height: 40px;
	background: #f60;
	text-align: center;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
}
</style>
</head>
<body>
<div style="height: 1500px">阅谁问君诵,水落清香浮</div>
<a class="fix-top" href="#">回到顶部</a>
</body>
</html>

   

效果图:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 43.2 KB
1
0
分享到:
评论

相关推荐

    纯css多级下拉菜单兼容ie6+主流浏览器

    本文将深入探讨如何使用纯CSS实现兼容IE6+及主流浏览器的多级下拉菜单,帮助Web开发者提升用户体验,同时简化开发流程。 首先,让我们了解CSS(层叠样式表)的基本概念。CSS是一种用于描述HTML或XML(包括如SVG、...

    基于bootstrap兼容ie7+后台模板

    "基于Bootstrap兼容IE7+"的后台模板,意味着该模板不仅具备Bootstrap的一般特性,还专门针对较老版本的Internet Explorer浏览器,特别是IE7及以上版本进行了优化,以确保在这些旧版浏览器中的正常显示和功能运行。...

    纯css二级导航 兼容ie6

    本教程将聚焦于如何利用纯CSS实现一个兼容IE6的二级导航菜单,正如“纯css二级导航 兼容ie6”这个主题所示。 首先,让我们了解纯CSS导航菜单的基本概念。CSS(层叠样式表)是一种样式语言,用于描述HTML或XML(包括...

    基于Jquery可居中显示并兼容IE6+/FF等浏览器的瀑布流程序(jquery.easing.js,jquery.vgrid.js实现)

    在本项目中,通过结合Jquery库和两个特定的插件——jquery.easing.js与jquery.vgrid.js,实现了这种布局,并且确保了在包括IE6+以及Firefox在内的多种浏览器中的兼容性。 1. Jquery:Jquery是一个广泛使用的...

    兼容IE8插件(兼容h5+css3新特性)

    这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3等新特性--&gt; &lt;!--[if (gte IE 6)&(lte IE 8)]&gt; [removed][removed] [removed][removed] [removed][removed] &lt;![endif]--&gt;

    CSS完美兼容IE6_IE7_FF的通用方法

    ### CSS完美兼容IE6_IE7_FF的通用方法 在网页设计与开发过程中,浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中,如何让网站同时兼容Internet Explorer 6(简称IE6)、Internet ...

    底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器

    "底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现,适用于多种浏览器环境,包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库,简化了...

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格(用DIV+CSS做的表格像素表格) 内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据...

    纯css-loading兼容Safari ,Chrome,Mozilla Firefox,opera,ie10+

    本文将详细探讨如何创建一个兼容多种浏览器的纯CSS加载动画,包括Safari、Chrome、Mozilla Firefox、Opera以及IE10及以上的版本。 首先,我们需要了解CSS的特性。CSS(Cascading Style Sheets)是一种样式表语言,...

    好看的CSS按钮(兼容IE6)

    "好看的CSS按钮(兼容IE6)"这个主题聚焦于创建既美观又能在老旧浏览器,如Internet Explorer 6(简称IE6),中正常显示的CSS按钮。IE6尽管已经过时,但在某些环境下可能仍需支持。下面我们将深入探讨如何利用CSS实现...

    兼容IE6+的文件上传控件plupload工具包

    它不仅支持HTML5的先进特性,如拖放上传,同时也为不支持HTML5的浏览器提供了回退方案,确保在谷歌、火狐以及不同版本的IE(包括6、7、8、9和10)等主流浏览器上的兼容性。 **1. 功能特性** - **多浏览器兼容**:...

    代码非常简洁的焦点图切换(兼容IE6+,chrome,火狐,opera等)

    "兼容IE6+"意味着代码需要能够在Internet Explorer 6及更高版本的浏览器上正常运行,同时还要兼容其他主流浏览器,如Chrome、Firefox和Opera。为了实现跨浏览器兼容性,开发者可能需要使用如jQuery这样的库,或者...

    html底部自适应页面兼容ie6纯css

    div+css设置html底部自适应窗口,内容少时bottom在窗口底部,内容多时被撑到最下方。

    Tabs切换卡jQuery代码兼容ie6+主流浏览器

    标题中的“Tabs切换卡jQuery代码兼容ie6+主流浏览器”是指使用jQuery库实现的一种网页界面交互功能,即Tab切换卡片效果。这种效果常见于网页设计中,用于将大量信息分组展示,用户可以通过点击不同的标签页来切换...

    CSS完美兼容IE6IE7FF的通用方法

    ### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

Global site tag (gtag.js) - Google Analytics