position:fixedのright , bottomをIE6に対応させる

position:fixedのright , bottomをIE6に対応させる

以前CSS : positionの「absolute」「relative」「fixed」のリファレンスというエントリーをしたんですが、この時はIE6にright , bottomへの対応の仕方について分かっていなかったのですが、Cyokodog::Diaryのcyokodogさん、THE HAM MEDIAのハムさんに教えて頂いたので紹介しておきたいと思います。

demo page

…ここからが続き

デモページの解説

Cyokodog::DiaryのIE6 向け position:fixed を right , bottom 指定にも対応させてみるで紹介されている一番下の方にプラグイン化って部分がありますので、そこのソースをhead内に読み込ませています。
※jQuryのプラグインです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/fixed.js"></script>

この状態でfixedを効かせたい要素にclass="fixed"と記入すれば、IE6にも適応されます。でもこのままだとガタつきつきが若干気になりますので、THE HAM MEDIAのCSSのpositionのまとめで紹介されているように下記CSSを記述して下さい。

html, body	{
	_height: 100%;
	_overflow: auto;
}

これで気になっていたガタつきもなくなるります。

この方法でやった場合、positionでの指定をする際IE6のみ若干調整をしないといけないと駄目なので注意して下さいね。

参考サイト

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article