Heim > Web-Frontend > HTML-Tutorial > ie6 ie7 ie8 ff兼容fixed的写法?_html/css_WEB-ITnose

ie6 ie7 ie8 ff兼容fixed的写法?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:26:25
Original
859 Leute haben es durchsucht

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>
Nach dem Login kopieren






<!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>
Nach dem Login kopieren

兼容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>
Nach dem Login kopieren

http://www.9958.pw/post/css_position_fixed 亲测通过

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage