先日より、とある場所にてMT3.01をインストールして作業をしております。
そこでCSSをカスタマイズしている時に出たＩＥのバグについて覚え書きを残しておこうと思います。
ＭＴの環境は、movabletype3.01を使用、ＨＩＮＡＧＡＴＡさんの提供によるテンプレート及びスキンを使用です。
◆バグと思しき症状。
背景色（背景画像）を指定したブロック内で、画像にfloat指定をすると「画像が表示されない（画像が見えない）状況、または文字が消える症状に陥る。
◆回避法。
参考：Dragon/egg: 「画面真っ白現象」はCSSのバグでした
上記では文字が消える症状について、その回避方法を説明されています。
そこで、画像も文字も一緒かもってことで同じように、サイズ指定を試みてみました。
float要素の入るブロックにサイズを指定するって事です（説明ベタですまん）。
例えば、box1という「箱」の中にfloat要素を指定したimgを表示させる場合。
box1に背景色（背景画像）を表示すると、その時点でimgが表示されません。
右クリックすると、画像自体は存在することが確認できます。
そこで、box1に「明確なサイズ」を指定します（width:***px; や height:***pxなど）。
そうすると、あら不思議！
ちゃんと表示されますね。
◆考えられる原因。
さっぱりわからん。
9月 9th, 2004 at 14:47:39
floatとwidthに関係する解釈はどのブラウザもまともではないですね。
仕様書では仮に値をautoとした場合も算出値は0（＝指定無し）と記されています。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#q8
float widthで検索すると記事が色々あるので、仕様書等と見比べてみると、面白いかもしれません。
9月 9th, 2004 at 16:00:27
コメントありがとうございます。
有名な方がコメントしてくれると嬉しいです（歓喜）
難しいですけど、これもお勉強。
頑張ります！
9月 9th, 2004 at 22:52:16
なんだか、凄く、尊敬・・・。
今朝の新聞で、ブリーダーの記事でてたね～。
騙されなくてよかったね～┐(’～`；)┌
久しぶりに、から揚げあげてみた。
私って天才だわ。
旦那に食べさせてないけどね～（笑）
9月 9th, 2004 at 23:10:05
俺は普通に唐揚げ作るよ。
唐揚げ粉だけど。
9月 10th, 2004 at 22:26:35
出来ませんでした。(>_<)
9月 10th, 2004 at 23:43:47
そんな私的なコメントをココに残さないでくれ…。
その手の内容はメールでお願いしますです…。
これでも一応、そこそこ読まれているブログなので…。
3月 12th, 2006 at 1:39:46
こんばんは、初めまして。
自ブログがまさに
「背景色（背景画像）を指定したブロック内で、
画像にfloat指定をすると「画像が表示されない（画像が見えない）状況、
または文字が消える症状」に陥りまして。
どうすることもできなくなりさ迷っていたところ、
貴サイトさまにたどりつきました。
回避方法として
○box1に「明確なサイズ」を指定する
とのことなのですが。
申し訳ありません、これをどこに入れればよいのかわかりません・・・・
画像urlの前部分に入れたり、いろいろ試したのですが
レイアウトがだんだん別方向に崩れて行ってしまいます凹
いきなりの書き込みで申し訳ありません
ご助力いただけると幸いです。
4月 7th, 2006 at 9:12:14
> zezeさん
すみません、コメントの返信遅くなっちゃいました。
その後、解決されましたか？
サイズを指定するのは、例えば画像(img)を入れている＜ＤＩＶ＞です。
＜ＤＩＶ＞
＜ＩＭＧ＞：float指定
＜ＤＩＶ＞
このような状態で、＜ＤＩＶ＞に背景を指定する場合、上記症状が出る場合があるので、＜ＤＩＶ＞に「サイズを指定」するわけです。
zezeさんの問題のページ見ましたが、
たぶん＜ＤＩＶ ＣＬＡＳＳ=ＥＮＴＲＹ_ＢＯＤＹ＞にwidth指定すればOKかと。
タグ禁止の関係で大文字全角使ってます。読みづらくてすいません（＾＾；
4月 7th, 2006 at 10:07:08
レスありがとうございますっ
KANGAROOさま記述の通り、HTML内の
＜ＤＩＶ ＣＬＡＳＳ=ＥＮＴＲＹ_ＢＯＤＹ＞にwidth指定してみました。
＞横幅が500なのでwidth=”500″に指定
結果、変わりませんでした凹
私は変更する箇所を間違えてるのかしら・・・
KANGAROOさまのご助言を再度確認しがんばってみます。
ああ、しかし悔しい・・・何故に・・・
ただいま回避策として、画像ひとつひとつを手作業にて
＜ｉｍｇ ｓｒｃ＝”**.gif” Ｗｉｄｔｈ＝”16” ｈｅｉｇｈｔ＝”16” ａｌｉｇｎ＝”ｌｅｆｔ” /＞＜ｂｒ＞文章
alignに訂正し、打ち込んでおります。
4月 7th, 2006 at 23:19:09
width=”500″を見て、もしや？と思ったんですが、＜div width=”500″＞とかにしてます？
CSSでwidthを指定する場合は、
.entry_body{
width:500px;
}
もしくは
＜div style=”width:500px;”＞
とします。
これでentry_bodyに500pxという幅を指定できますよ。
4月 8th, 2006 at 4:56:51
ありがとうございます、ありがとうございます！
お察しの通り＜div width=”500″＞にしておりました凹
上記の通り
.entry_body{
width:500px;
}
に変更したところ、今までまったく記述されなかった文章が
もりもりもりと復活いたしました！！
今まで画像一つ一つ、手作業でタグを直していたのに・・・・
感動です、本当に感謝の気持ちいっぱいです。
何度もお手数おかけして、申し訳ありませんでした。
今後このような「教えてちゃん」ではなく
ひとつひとつ、学んでいかねばと考えております。
最近いきなり暖かくなり
体調が崩れやすくなっております。
風邪を召されぬよう、お気をつけて(o^-^o)ゞ
4月 8th, 2006 at 14:57:00
解決して良かったですー(^^
また何かあればどうぞー