<!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>
<style type="text/css">
html,body{margin:0;padding:0;}
#y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}
#y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}
#y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}
#y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}
</style>
<!--[if lte IE 6]>
<style>
#y1 {position:absolute;}
#y2 {position:absolute;}
#y3 {position:absolute;}
#y4 {position:absolute;}
</style>
<![endif]-->
<script type="text/javascript">
//以下所有脚本只为IE6写，其他浏览器完全可以删除。
function getViewportScrollX() {
var scrollX = 0;
if (document.documentElement && document.documentElement.scrollLeft) {
scrollX = document.documentElement.scrollLeft;
}
else if (document.body && document.body.scrollLeft) {
scrollX = document.body.scrollLeft;
}
else if (window.pageXOffset) {
scrollX = window.pageXOffset;
}
else if (window.scrollX) {
scrollX = window.scrollX;
}
return scrollX;
}
function getViewportScrollY() {
var scrollY = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollY = document.documentElement.scrollTop;
}
else if (document.body && document.body.scrollTop) {
scrollY = document.body.scrollTop;
}
else if (window.pageYOffset) {
scrollY = window.pageYOffset;
}
else if (window.scrollY) {
scrollY = window.scrollY;
}
return scrollY;
}
function getViewportWidth() {
var width = 0;
if (document.documentElement && document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
}
else if (document.body && document.body.clientWidth) {
width = document.body.clientWidth;
}
else if (window.innerWidth) {
width = window.innerWidth - 18;
}
return width;
}
function getViewportHeight() {
var height = 0;
if (window.innerHeight) {
height = window.innerHeight - 18;
}
else if (document.documentElement && document.documentElement.clientHeight) {
height = document.documentElement.clientHeight;
}
else if (document.body && document.body.clientHeight) {
height = document.body.clientHeight;
}
return height;
}
if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {
window.ononload = window.onscroll = window.onresize = function (e) {
var t = getViewportScrollY();
var l = getViewportScrollX();
var w = getViewportWidth();
var h = getViewportHeight();
document.getElementById("y1").style.left = l + "px";
document.getElementById("y1").style.top = t + "px";
document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
document.getElementById("y2").style.top = t + "px";
document.getElementById("y3").style.left = l + "px";
document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
}
}
</script>
</head>
<body>
<div id="y1">左上角位置的内容</div>
<div id="y2">右上角位置的内容</div>
<div id="y3">左下角位置的内容</div>
<div id="y4">右下角位置的内容</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
</html>
分享到：
相关推荐
"JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)"是一个专门为JavaScript环境设计的，旨在解决跨浏览器兼容性问题的日期选择工具。这个组件的目标是确保在不同浏览器如Internet Explorer（IE）、Firefox、...
Oprea浏览器安卓版
【标题】中的“纯js写的java搜索框，无数据库，ＩＥ，火狐兼容”意味着这是一个使用纯JavaScript编写的搜索功能，它不依赖任何后端数据库，并且可以在Internet Explorer（IE）和Firefox这两种不同的浏览器上正常运行...
android 4.0 oprea 浏览器。支持最新版 安卓
整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
本日历算不上什么控件，但是好修改、好用,如果分要加上个版本，那就叫 1.0 吧 本日历兼容 IE6、IE7、IE8,Firefox,Oprea,Chrome,Safari
整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序采用纯静态，无后台傻瓜式、简单易学...
整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...
麦乐网址导航(Metro风格)整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态...
整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。本程序修改纯静态，无后台傻瓜式、简单易学，...
麦乐网址导航win8版采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台...
【标题】"电脑wap浏览器(仿oprea)"指的是在个人计算机上使用的，模拟WAP协议的浏览器软件，这种浏览器的设计灵感可能来源于Opera浏览器，旨在帮助用户在非移动设备上访问WAP格式的网页内容，特别是在没有直接支持或...
7. **兼容性与跨平台**： Opera Mini不仅适用于黑莓设备，还支持多种其他操作系统，如Android、iOS等，确保用户无论使用何种设备都能享受一致的浏览体验。 8. **版本更新**： 文件名"opera-mini-4.1.11355"可能指...
网页制作Webjx文章简介：Opera所属:挪威Opera Software ASA公司渲染引擎:自家的...IE(internet explorer)公司:微软(MicroSoft)布局引擎:Trident(也做MSHTML). Opera所属:挪威OperaSoftwareASA公司渲染引擎:自家的Presto
本人没办法了，下载东西提示积分不够，就先上传一些自己的资源，其实我不太喜欢这种积分制，太憋屈了，我每次都评价，可是照样积分被扣。 本人在用黑莓8700，如果有需要其他一些资源的朋友联系我，需要qq，飞信什么...
基于纯CSS3实现的立体提示模块代码，效果如上图所示，烈火小编分别测试了IE8、chrome、firefox、oprea这几个浏览器，仅在火狐下正常显示，具体的实现过程请参照：http://www.veryhuo.com/a/view/44285.html