-
21-08-2019 - |
質問
位置固定ができないInternet explorer6.いかに修正した。が必要ですIE6,IE7,IE8&FireFox3.0.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
解決
なIE6!は早ければ早いほど多くの国民がハッキングサイトについIE6の牽引で、より迅速です。又は追加のコード後の最初のスタイルブロック;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
のない超スムーズなものです。
更新
んもうこ;ただし機械によid(またはクラスの要素として位置を固定する設定"を宣言リストの開始以上のブロックという自IE6.
他のヒント
はいIE6は吸います。ここでのハックだ...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
基本的には、絶対にそれがスクロールたとしても、左上に配置され、それを維持するためにIE6を伝えています。 これはIE6でそれを乗る上で、そのよう要素のためにあなたのCSSの残りの部分の下に行く必要があります。
ここで、それはあなたの左のバーのためです...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
私が試こIETesterのバージョンのIE6くことになっていを---ないジッターふうっ
もう言い要素のクラスのボックスのための例---
.box {
position: fixed;
top: 0px;
left: 0px;
}
の開 <HTML>
タグと条件IE諸表の...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
や
<!--[if !IE]--> <html> <!--[endif]-->
そのような MatW & mitchbryson 食べ方-使い方表現を位置固定です。
注意:このコードが後の要素のスタイルをCSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
問題は、このページをスクロール要素にジッターのこの一つの方法で補...
注意:このコードがトップにおCSS後のお風'HTML{}"のCSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
による トーマスAylott @SubtleGradient.com ,
"...この処理など、CSSの前のページが描画されます.での処理のcssが再び再描画で見ていて気分が良いものを処理すcss表現の前に再描画ます。ここで完全に滑らかな位置を固定です。""
第リンク: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
例えば、一緒---
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
私は微調整し、この解決策が見つかりました(。基本的に私が変更された行だった:$( '#のsidebar_left')をCSS( '上'、document.documentElement.scrollTop);):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo@gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
これは、ジッタと悪いように見えますが、IE6を含むすべてのブラウザで動作します。
私は最近、位置を取得するjQueryプラグインを書いた:固定IE 6+で働きます。それはがは、スクロールのジッタは、それが機能(ないユーザーエージェント)を見ていないと、Internet Explorer 6、7、8で動作します。
あなたはIE7 +位置でstrictモードを使用する場合は、:固定光栄が、デフォルトでIE7 +は癖モードで動作します。このプラグインは、ブラウザの機能をチェックし、それが位置尊重していない場合:固定、それはjQueryの修正を実装します。
http://code.google.com/p/fixedposition/する
このような何かがあなたのために働くことがあります:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
あなたはそれがあなたのコードのために働いて得るために、いくつかのマイナーなCSSの調整を行う必要があるかもしれません。私は、我々が話すようなオプションなどの値を「オフセット」に取り組んでいます。
これは、CSSの表現でそれを行うことが可能であるが、いくつかの余分なハックでスムーズスクロールを取得するには:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}