Regarding the problem of returning to the top code, IE6 does not support it, I hope experts can help solve it._html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:13:03
Original
1034 people have browsed it

html code

<html><head><script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><link rel="stylesheet" type="text/css" media="all" href="1.css" /></head><body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div style="display:none;" class="back-to" id="toolBackTop"><a title="返回顶部" href="#top" class="back-top">返回顶部</a></div><!--top start--><script type="text/javascript">$(document).ready(function () {        var bt = $('#toolBackTop');        var sw = $(document.body)[0].clientWidth;        var limitsw = (sw - 880) / 2 - 91;        if (limitsw > 0){                limitsw = parseInt(limitsw);                bt.css("right",limitsw);        }        $(window).scroll(function() {                var st = $(window).scrollTop();                if(st > 30){                        bt.show();                }else{                        bt.hide();                }        });		 $("#toolBackTop").click(function () {                   $('body,html').animate({ scrollTop: '0px'}, 1000);                   return false;               });})</script><!--top end--></body></html>
Copy after login


css code
.back-to {	bottom: 35px;	overflow: hidden;	position: fixed;	right: 10px;	width: 110px;	z-index: 999;}.back-to .back-top {	background: url("back-top.png") no-repeat scroll 0 0 transparent;	display: block;	float: right;	height: 50px;	margin-left: 10px;	outline: 0 none;	text-indent: -9999em;	width: 50px;}.back-to .back-top:hover {	background-position: -50px 0}
Copy after login


displays misalignment under IE6, which is different from the actual position in IE8! Please help me solve the code, thank you all


Reply to the discussion (solution)

Cannot float in IE!

No one understands?

How to use JS to solve the problem that position: fixed; is invalid in IE6, who can solve it?

How to use JS to solve the problem that position: fixed; is invalid in IE6, can anyone solve it

IE6 uses js to implement
Reference

<%@ Page Language="C#" %><!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>
Copy after login

Quote from the 3rd floor’s reply:

How to use JS to solve the problem of invalid position: fixed; in IE6, who Can you solve it?


ie6 uses js to implement
Reference
HTML code
<%@ Page Language="C#" %>
I have solved it in my own way! However, thank you very much Answer

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