IE6で「position:fixed;」を実現
- 2007
- 11/20
- 17:13
IE6では使えない psition:fixed;(ボックスを画面上の任意の地点に固定する)を実現する方法です。
今までbodyをheight:100%にする方法はありましたが、レイアウトが複雑になってくると不具合がおきることが多かったので、使わずにいました。
ところがもっと簡単な方法があったんですね。ただしJavaScriptがONになってないと使いませんが。。。
position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0));
IE6以外のブラウザではアンダースコア( _ )の付いたスタイルは無視するので、普通にfixedが適用されます。
IE6ではスクロールのたびにtopの座標を画面の上部から0pxに指定するので、absoluteでもfixedと同じ効果が生まれます。
ただしこのままだとスクロールのたびに固定したボックスがガタガタしますので、以下のようにbodyの背景にfixdを指定してやると解決します。
body {
background: url(null) fixed; /* 画像はあっても無くても可 */
}
参考サイト
IEで固定座標を指定する方法
今までbodyをheight:100%にする方法はありましたが、レイアウトが複雑になってくると不具合がおきることが多かったので、使わずにいました。
ところがもっと簡単な方法があったんですね。ただしJavaScriptがONになってないと使いませんが。。。
position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0));
IE6以外のブラウザではアンダースコア( _ )の付いたスタイルは無視するので、普通にfixedが適用されます。
IE6ではスクロールのたびにtopの座標を画面の上部から0pxに指定するので、absoluteでもfixedと同じ効果が生まれます。
ただしこのままだとスクロールのたびに固定したボックスがガタガタしますので、以下のようにbodyの背景にfixdを指定してやると解決します。
body {
background: url(null) fixed; /* 画像はあっても無くても可 */
}
参考サイト
IEで固定座標を指定する方法
- CSS |
- Comments:0 |
- Trackbacks:0 |
- Edit
Comments
- コメントの投稿
Trackbacks
- Trackback URL
- http://season.14.dtiblog.com/tb.php/42-61eb0b92











































