Blog Top

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

position:absoluteを指定するとIE6でずれる

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク

zoom:1でデフォルトスタイルをリセットするのを止めてから、ちょくちょくIEでのブラウザ崩れと遭遇する。今回もその一つ。

今回遭遇したのは、position:absoluteで位置を指定すると、IE6だと要素がずれて表示されるバグ。

absoluteを指定した要素をbottomを基準に表示しようとすると、他のブラウザではrelativeを指定した親要素の下を基準にちゃんと表示されるのに、IE6ではそれが無視されてしまう。


p {
     padding:0;
     margin:0;
}

div#contents{
     position:relative;
     margin:0 0 10px;
     border:1px solid #ccc;
}

div#contents p#zettai{
     position:absolute;
     bottom:0;
     right:0;
}

<div id="contents">
       <p>サンプル</p>
       <p id="zettai">絶対配置</p>
</div>

<p>テスト</p>

これを解決するには、absoluteを指定している要素の親要素にheightかwidthを指定する。今回の例だとcontentsに指定する。


p {
     padding:0;
     margin:0;
}

div#contents{
     position:relative;
     margin:0 0 10px;
     border:1px solid #ccc;
     width:300px; /* もしくはheightを指定 */
}

div#contents p#zettai{
     position:absolute;
     bottom:0;
     right:0;
}

<div id="contents">
       <p>サンプル</p>
       <p id="zettai">絶対配置</p>
</div>

<p>テスト</p>

これでIE6でも他のブラウザと同じように親要素のbottomを基準に表示される。

関連記事

トラックバック

http://blogmemoblog.blog.fc2.com/tb.php/11-cef5d322

コメントの投稿

管理者にだけ表示を許可する

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。