知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

解決済

clip!clip!
Ads By Google

オリジナルのヘッダを貼りかえたら、IEだけが崩れる

マックユーザですが、トップページスタイルシート(CSS)でオリジナル画像を張り替えたら、firefox,Safariは正常なのですがwindowsにおいてIEだけがレイアウト崩れてしまいます。

具体的には3カラムの真ん中のブロックが、揃いません。

2009-06-06 01:08の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2009-06-12 07:25:09ベスト
原因はブログヘッダにオリジナル画像を貼り付けたことではなく、記事の中にあります。具体的には記事中に連続して画像を貼り付けていることが原因です。
なので、画像のあるこの記事ではレイアウトが崩れて、

画像のないこの記事ではレイアウトが保たれています。


IE7以下に関しては、imgタグをalign=leftで続けて書いた場合にはボックスサイズを超えた場合においても自動で折り返しがされません。そのためIE7では画像が本文エリアからはみ出した形で表示され、IE6以下では本文エリア自体が横に広げられます。

回避法としては、折り返される前の画像ではalign="left"を使わずに手動で画像を折り返すか、CSSの中で「#content」に対して
overflow: hidden;
を追加してはみ出した部分を非表示にすることでレイアウトを維持することが出来ます。

[手動で画像を折り返す]というのが解りません。画像を2つ貼ったらテキストを数行挿入するレイアウトで回避できそうです。とりいそぎはそんな感じでありがとうございました!

1.

2009-06-11 20:42:55ベター
具体的な状況が分からないので、なんとも言えませんし、レイアウトが崩れるIEのバージョンによっても違いますが、IE6であればバグが原因だと思われます。
・ボックスの幅や高さを算出するときにpaddingやborderのサイズを含めてしまう

・幅や高さを指定した要素の子孫要素でデフォルト指定のマージンが消える

この辺りが影響していますでしょうか。他にもIE6のバグは下記にまとめられていますので、参考にしながら該当する部分を見直してみては如何でしょうか。

ありがとうございます。なんとなくこの中に解決策がありそうですが
どこをどういじるのだ????具体的には以下をIEで視る場合なのですが
http://blog.livedoor.jp/sashimi_01/
読みこなす努力はしてみます。

Ads By Google

コメント(4)

具体的にサイトのURLを示したり、そのHPかブログのHTMLやCSS、Livedoorブログならどういう雛形デザインでどこをどうやっていじったのか書いた方が、求めてる回答はつくと思いますよ。

今のままだと

確かに友達もMacでブログやってて、画像の貼り付け方がおかしくてIEでみると段々になってたりすることあるね。

くらいしか答えようがない。

#2.  
2009-06-12 04:49:35

すみません、やっぱIE6のバグでしょうか?しかしどこをどう修正していいのか。。。。具体的なURLはこれですが。
http://blog.livedoor.jp/sashimi_01/

2009-06-15 06:56:49

HTMLを見ると画像は<img src=.... align="left" />という風に「align="left"」が設定されていると思います。で、これが画像を強制的に横並びにしているわけですので、折り返しをしたい手前の画像から「align="left"」を取ることで折り返しが実現できます。

#4.  
2009-06-26 02:45:45

>tani.masaruさん
ありがとうございました。コレ、IEのヴァージョンが上がったら解消されるんですかねぇぇ

トラックバック(2)

トラックバックURL: