2007年12月10日
IEで絶対配置（absolute）のボックスの中身がずれる
先日、仕事でHTML4.01 Transitional＋CSSでコーディングしていたところ、position:absolutを指定したボックスの中にある要素が、Windows IE6でズレて（飛び出て？）表示されるというバグがありました。
3つのボックスに「position:relative」をかけて、その子要素をabsoluteしてたんですよ。で、3つのボックスを横並びにしたかったので「float:left」をかけてみたら・・・なんと！3つ目のボックスの中の子要素の最後の一つが、CSSが外れたかのように左下に表示されちゃったんです。 どんな感じかというと、
こんな感じ。これが、IEだけで起こるんです。FirefoxやらOperaはオッケー。意味不明。
ためしに、枠外に飛び出てしまう要素に「border」を入れてみたけど、フツーに本来あるべき場所に枠が。でも、中身は左下。・・・なんじゃこりゃ！？ということで、調べてみました。
とりあえずいろいろネットを調べていると、IEでposition:absoluteを指定した場合に起こるバグのようです。IE6/IE7ともに起こるらしい。
対処法は、
問題の起こる要素の直後（閉じDIVの手前）でclearを掛ける
これで、この問題は回避されます。
まぁ、after擬似要素でclear掛けるか、hrタグでclear掛けるか、はたまた空DIV入れるか・・・をして、clear掛ければ大丈夫！
ちなみに、自分は・・・時間がなかったので空DIVにしましｔ
ホント、ゴメンナサイ・・・
ちなみに、参考にさせていただいたのはこちら！
IEで絶対配置（position:absolute）のボックスが消えるバグの検証 － jmblog.jp
IEで position:absolute した要素が消えるバグ － ぴのBlog
IEでのCSSのバグを回避するhasLayout － コリス
そろそろプライベートな話でも書いたほうがいいと思いつつ、CSSの話しかありません・・・
トラックバック
この記事へのトラックバック用アドレス: http://www.buzz727.jp/blog/mt-tb.cgi/96
«2009年7月
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
ブログ内検索
最新の記事
カテゴリ
- CSS (9)
- Google Adsense
- Google Analytics
- その他 (1)
- ブログをカスタマイズする！ (8)
- Movable Type タグ解説 (3) / Movable Type 機能解説 (1) /
- プライベート (2)
- DAHON Mu P8 (1) / ドライブ (1) / ラクティス (3) / 新車購入 (4) / 映画 (2) / 遊びとか (1) /
- 写真 (3)
- 動画 (2)
- YouTube (3) /
- 気になったニュース (15)
- 雑記 (26)
- お土産 (2) / ひとり言 (3) / インターネット (1) / ランキング (2) / ランニング 広告 (3) / 旅行 (2) / 試食 (1) /
