CSSテクニックコミュの[質問] MacIEで回り込みを指定したはずのテキストが画像へかかってしまう

制作環境：WinXPPro,Win2k　IE　FireFox
動作環境：MacOS9　IE5.x

XHTML+CSSにてレイアウトを行っています
Windows のIE,FireFoxと　Mac の Safari,FireFoxでは正常に表示されますが
MacIEのみ思い通りに行かない状況です
CSSバグリストも参照しましたが載っていません
「Mac　CSS　回り込み」等で
コミュニティ内と外部サイトにて検索しましたが該当項目がありません

現在floatによるテキストの回りこみを行っているのですが
構成として画像の左側にテキストを回り込ませる形を取っています
テキストの中には複数のサブタイトルが入っているのですが
このサブタイトル部分に何か起きているようで
上記画像のようにサブタイトル部分が画像へかかってしまいます

widthを指定しても背景色を透明にしても防げません
どのようにすればこの画像へかかることを防げるでしょうか？
恐れ入りますがよろしくお願いいたします

ソースは下記のとおりです
/* CSS
+++++++++++++++++++++++++++++++++++++++++++++++ */
.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;
}
.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;
}

/* XHTML
+++++++++++++++++++++++++++++++++++++++++++++++ */
<!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>
～略～

※大手質問サイトにて同様の質問をさせていただきましたが
回答が得られないのでこちらに再掲させていただきました
マルチポストになりますので現在あちらへは削除要請をさせていただいています

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 07月14日 23:57

<p class="subtitle">内のテキストを<span>等でタグ付けし、それに以下のスタイルを設定することで回避できませんでしょうか？
ご例示したような全体を囲むdiv(.No001)の幅が狭い場合は無意味かもしれませんが。

p.subtitle span {
display: block;
border: 1px solid #999999;
}

あくまでOS9ではなく、OSXのIE5.2.3ですが、同様な現象が起きましたのでご報告。
ご参考になればよいですが。

（以下所感）
いくつかテストした結果、回り込む要素（p.subtitle）のwidthプロパティを設定している場合、回り込まれる要素（p.imgfloat001）のwidth, margin, padding, border各プロパティの値を足した値になるようです。

つまりこの場合、表示されるp.subtitleの幅は、
345 + 300 + 5 = 650pxとなり、
その為、p.subtitleのボーダー及び背景がp.imgfloat001に重なってしまうと考えられます。

しかし、内部の匿名ボックスには通常通り継承されている為、上記の様にすることで回避できると思われます。

HTMLは不細工ですが。

[2] mixiユーザー 07月15日 00:55

幅固定でサブタイトルの幅も固定で良いのなら、
.subtitle{margin-right:305px;}
とか？

[4] mixiユーザー 07月15日 04:05

＞ 1: Critter さん
＞ 2: ginnez さん
＞ 3: キヨキチさん

回答をいただきありがとうございます
まだこちらでチェックをしていないので「できた」「できない」の報告はできませんが
先にお礼を言わせていただければ幸いです

また上記記載の「大手質問サイトにて同様の質問を投稿した件」についてなのですが
削除要請が間に合わずに回答がついてしまったため削除不可となってしまいました
ですので　こちらで得られた回答はあちらの大手質問サイトへ
大手質問サイトで得られた回答はこちらへ記述させていただきたいと思っております

みなさまには大変ご迷惑をお掛け致します　申し訳ございません

後日こちらで上記項目を検証の上　再度報告させていただきます
よろしくお願いいたします

あちらで得られた回答です
●Fx は固有名詞だからスペルに注意したほうがいいみたいです。
http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate

それと、Mac IE は CSS の float プロパティに一部非対応ですので、
レイアウトが正しくても正常に表示されない可能性があります。

[5] mixiユーザー 07月18日 19:15

＞ 1: Critter さん
＞ 2: ginnez さん
＞ 3: キヨキチさん

チェック環境が会社のため報告が祝日明けになり申し訳ありません
上記の結果報告です

まず Critter さんの方法のとおり
「subtitle」内のテキストを<span>でタグ付けしCSSを当てました
その結果　質問の写真でいう灰色の罫線部分が
ちょうどサブタイトル内で収まりはしたのですが
サブタイトル背景の白い部分だけはまだ画像にかかってしまう状態でした
（写真1）

次に ginnez さんの方法である
「幅固定でサブタイトルの幅も固定」を指定しました
サブタイトルの幅は決まっているので幅を固定しても問題ありませんでした

それと一緒にキヨキチさんからの助言で
widthとmarginを別々の場所で指定し直しました
「widthとpaddingを一緒にしてはいけない」ということは知っていたのですが
まさかpaddingの他にも一緒にしてはいけない項目があったとは知らなかったので
今回の件でとてもよい勉強になりました
このコミュのトピックで「クロスブラウザの掟」というのがあったのですね！
この祝日でじっくり読ませていただきました

また　他の記事中に2列の段組をするものもありますので
CSSを「imgfloat001」用に追加しました
追加・修正したCSSソースは下記のとおりです
（ちなみにborderはデバッグ用につけたもので　実際には使用しません）
上記の結果　3つ統合したもので無事MacOS9 IE5.xにて
ちゃんと表示できるようになりました！
（写真2）

1週間調べつづけて見つからなかった疑問点が
わずか9時間ほどで解決してしまうとは　正直驚きとともに
自分の未熟さを思い知らされました
（まだXHTML+CSSレイアウトをはじめて日が浅いのですが）

皆様に貴重なお時間を取らせてしまい申し訳ありませんでした
おかげさまで本当に助かりました！
そしてめでたく本日完パケさせていただきました

本当に本当にありがとうございました！

/* CSS
+++++++++++++++++++++++++++++++++++++++++++++++ */
/* imgfloat00x用 */
.subtitle {
font-size: 1em;
font-weight: bold;
color: #ff9933;
background-color: #ffffff;
margin: 0 0 0 0;
border: 0px solid #999999;
}
.b-subtitle {
font-size: 1em;
font-weight: bold;
color: #000000;
background-color: #ffffff;
margin: 10px 0 0 0;
border: 0px solid #999999;
}
/* imgfloat001用 */
.subtitle-a {
font-size: 1em;
font-weight: bold;
color: #ff9933;
background-color: #ffffff;
margin: 0 300px 0 0;
border: 0px solid #999999;
}
.b-subtitle-a {
font-size: 1em;
font-weight: bold;
color: #000000;
background-color: #ffffff;
margin: 10px 300px 0 0;
}
.subtitle-a span {
width: 345px;
display: block;
border: 0px solid #999999;
}
.b-subtitle-a span {
width: 345px;
display: block;
border: 0px solid #999999;
}

/* XHTML
+++++++++++++++++++++++++++++++++++++++++++++++ */
<div class="No001">
<p class="subtitle-a"><span>記事サブタイトル　橙</span></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-a"><span>記事サブタイトル　橙</span></p>
<p class="text">
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
</p>
～略～
</div>
～略～

[6] mixiユーザー 07月19日 02:49

＞「subtitle」内のテキストを<span>でタグ付けしCSSを当てました
＞その結果　質問の写真でいう灰色の罫線部分が
＞ちょうどサブタイトル内で収まりはしたのですが
＞サブタイトル背景の白い部分だけはまだ画像にかかってしまう状態でした
＞（写真1）

.subtitleのbg-colorを削除したらどうですか、というか必要ないんじゃないですか、というか上がったようですのでいいですか。

あと、継承とタグ付けとclass命名についてもう少し学ばれると、css作成がもう少し楽になるんじゃないかと思いました。

[7] mixiユーザー 07月19日 03:23

＞6: Critter さん
bg-colorをつけないと
CSSチェッカーに「ちゃんとつけろ」といわれるのでつけています
本当に必要なのかどうかはまだ調べていないので今後の課題ですね

タグ付けや命名も徐々に変化していくと思います
今後の引継ぎをする方がXHTML+CSSの知識がない方なので
今回は何が何なのかの意味を分かりやすくするためにこのようになりました

本当ならもっと分かりやすい命名の仕方があるのでしょうけどね（笑）
私の現状の知識ではこれが限界です

私自身も今後どんどん勉強して更に上を極めていこうと思っています

ありがとうございました！

ログインすると、みんなのコメントがもっと見れるよ