- 締切済み
MacIEで回り込みを指定したはずのテキストが画像へかかってしまう
制作環境：WinXP,Win2k IE FireFox 動作環境：MacOS9 IE XHTML+CSSにてレイアウトを行っています Windows のIE,FireFoxと Mac の Safari,FireFoxでは正常に表示されますが MacIEのみ思い通りに行かない状況です 現在floatによるテキストの回りこみを行っているのですが 構成として画像の左側にテキストを回り込ませる形を取っています テキストの中には複数のサブタイトルが入っているのですが このサブタイトル部分に何か起きているようで どうしてもサブタイトル部分が画像へかかってしまいます widthを指定しても背景色を透明にしても防げません どのようにすればこの画像へかかることを防げるでしょうか？ 恐れ入りますがよろしくお願いいたします ソースは下記のとおりです .subtitle { width: 345px; font-size: 1em; font-weight: bold; color: #ff9933; background-color: transparent; margin: 0 0 0 0; border: 1px solid #999999; } .text { text-indent: 1em; line-height: 1.5em; color: #000000; background-color: transparent; margin: 0 0 15px 0; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div class="No001"> <p class="subtitle">記事サブタイトル 橙</p> <div class="imgfloat001"> <img src="img/001-hoge.jpg" alt="写真" title="写真" width="300" height="400" /> <p>写真キャプション写真キャプション写真キャプション写真キャプション</p> </div> <p class="text"> テキストテキストテキストテキストテキストテキストテキスト </p> <p class="subtitle">記事サブタイトル 橙</p> <p class="text"> テキストテキストテキストテキストテキストテキストテキスト </p> </div> ～略～
- yuki_405
- お礼率100% (10/10)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
Fx は固有名詞だからスペルに注意したほうがいいみたいです。 http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate 問題の件に関してはまだ何も確認していませんが、float:left; がどこにあるのかわかりません。 それと、Mac IE は CSS の float プロパティに一部非対応ですので、 レイアウトが正しくても正常に表示されない可能性があります。
お礼
Fxに関しての助言ありがとうございます！ こういうことには注意する方なんですが覚え違いをしていたみたいです… それと問題の件についてですが 字数制限のため泣く泣く削らせていただきました どうやら削るべき場所を間違えていたみたいですね 削ったところは補足にて記述させていただきます MacIEがfloatプロパティの一部に非対応とは初めて聞きました そこら辺は調べてみたいと思います それと実は今回の質問投稿後 急遽別所にて質問をさせていただこうと思い すぐに削除要請を出したのですが 間に合いませんでしたので こちらで得られた回答は別所へ 別所で得られた回答はこちらへ記述させていただきたいと思っております 一先ず現在までに得られている情報は ●<p class="subtitle">内のテキストを<span>等でタグ付けし、 それに以下のスタイルを設定することで回避できませんか？ p.subtitle span { display: block; border: 1px solid #999999; } ●いくつかテストした結果、回り込む要素（p.subtitle）の widthプロパティを設定している場合、 回り込まれる要素（p.imgfloat001）のwidth, margin, padding, border 各プロパティの値を足した値になるようです。 つまりこの場合、表示されるp.subtitleの幅は、 345 + 300 + 5 = 650pxとなり、 その為、p.subtitleのボーダー及び背景がp.imgfloat001に重なってしまうと考えられます。 しかし、内部の匿名ボックスには通常通り継承されている為、 上記の様にすることで回避できると思われます。 ●幅固定でサブタイトルの幅も固定で良いのなら、 .subtitle{margin-right:305px;} ●widthとmargin、padding、borderは一緒に定義しない方がいいかと。 widthだけ。とか。 marginとpadding、とか。
補足
/* CSSの補足です ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .No001 { width: 350px; margin: 0 0 0 10px; border: 1px solid #ff0000; } .imgfloat001 { float: right; width: 300px; margin: 0 0 15px 5px; border: 0px solid #999999; } .imgfloat001 p { font-size: 0.9em; margin: 0 0 10px 0; border: 0px solid #999999; }