cari

Rumah  >  Artikel  >  hujung hadapan web  >  js menyelesaikan teknik bug_javascript IE6 tidak menyokong position:fixed dengan sempurna

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

WBOY
WBOYasal
2016-05-16 16:02:381362semak imbas

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>

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)))}

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))}

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)))}

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing_javascriptArtikel seterusnya：Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing_javascript

Artikel berkaitan

Lihat lagi