ie6 ie7 ie8 ff兼容fixed的写法?_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:26:25820浏览
ie6 ie7 ie8 ff兼容fixed的写法?
回复讨论(解决方案)
<!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=gbk" /><title>IE6 position:fixed</title><style type="text/css">* { margin:0; padding:0;}#content{ height:2000px; }#a{ position:fixed; bottom:0; right:0; width:200px; height:60px; background:#F00;}/*IE6 fixed bug*/* html{overflow:hidden;}* html body{height:100%;overflow:auto;}* html #a{position:absolute;right:18px;}</style></head><body><div id="content">IE6 position:fixed</div><div id="a">IE6 position:fixed</div></body></html> 或
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> body { height:1200px; } .floatDIV { width:100px; height:100px; background:#ddd; top:100px; right:10px; /* not ie6 */ position:fixed; /* ie6 */ _position:absolute; _top:expression(documentElement.scrollTop + 100); } html { _background:url(about:blank); /* 阻止闪动 in IE6,把空文件换成about:blank,减少请求 */ } </style> </head> <body> <div class="floatDIV"> 123 </div> </body></html> 兼容IE6/IE7/IE8/IE9/Firefox/Chrome/Safari/Oprea浏览器的浮动代码
<!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> http://www.9958.pw/post/css_position_fixed 亲测通过
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn