Home >Web Front-end >HTML Tutorial >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
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
- WBOYOriginal
- 2016-06-24 12:13:031065browse
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> 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} 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> 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
020c41b0b80cf4109e16c6f44971ed71
I have solved it in my own way! However, thank you very much Answer
Statement：
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
Previous article：Web page slicing div css problem_html/css_WEB-ITnoseNext article：Web page slicing div css problem_html/css_WEB-ITnose