js menyelesaikan teknik bug_javascript IE6 tidak menyokong position:fixed dengan sempurna-tutorial js-php.cn

js menyelesaikan teknik bug_javascript IE6 tidak menyokong position:fixed dengan sempurna

WBOY

Lepaskan： 2016-05-16 16:02:38

asal

1387 orang telah melayarinya

Mari kita lihat kodnya dahulu

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

Salin selepas log masuk

Kod di atas sangat biasa di Internet Ia mencapai kesan position:fixed di bawah IE6 dengan menetapkan html{overflow:hidden} dan body{height:100%;overflow:auto}. Iaitu: ini akan menjadikan mutlak dan hubungan asal pada halaman menjadi kesan tetap Saya tidak akan melakukan demo di sini Jika anda mempunyai sebarang keraguan, anda boleh mencubanya sendiri.

Jadi saya mencari maklumat dan mendapati bahawa kesan position:fixed di bawah ie6 boleh direalisasikan dengan sempurna melalui ungkapan CSS dalam Internet Explorer Kod css adalah seperti berikut:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

Salin selepas log masuk

Kod di atas boleh digunakan secara langsung Jika anda ingin menetapkan margin terapung elemen, anda perlu menetapkannya dua kali Contohnya, jika anda mahu elemen menjadi 10 piksel dari atas dan 10 piksel kiri, maka anda perlu melakukan ini Zi menulis:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

Salin selepas log masuk

Dengan cara ini, kesan position:fixed di bawah IE6 diselesaikan, dan ia tidak akan menjejaskan mutlak dan perkaitan lain Walau bagaimanapun, masih terdapat masalah, iaitu elemen yang digantung akan bergetar

IE mempunyai proses pemaparan berbilang langkah. Apabila anda menatal atau mengubah saiz penyemak imbas anda, ia menetapkan semula segala-galanya dan melukis semula halaman, pada ketika itu ia memproses semula ungkapan CSS. Ini boleh menyebabkan pepijat "getaran" yang jelek, di mana elemen kedudukan tetap perlu melaraskan untuk mengikuti penatalan anda (halaman) dan dengan itu "melompat".
Cara untuk menyelesaikan masalah ini ialah dengan menambah imej latar belakang pada badan atau elemen html menggunakan background-attachment:fixed. Ini memaksa halaman untuk memproses CSS sebelum mengecat semula. Kerana ia memproses CSS sebelum mengecat semula, ia juga akan memproses ungkapan CSS anda terlebih dahulu sebelum mengecat semula. Ini akan membolehkan anda mencapai elemen kedudukan tetap yang lancar dengan sempurna!
Kemudian saya dapati imej latar belakang tidak memerlukan gambar sebenar, cuma tetapkan kepada about:blank.

Kod lengkap dilampirkan di bawah

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.