締切済み

[CSS]IE7での親子DIVの子の表示について

2009/03/12 14:41

表現が難しくて、タイトルが少し変です。すみません。。 <div id="parent"> <div style="position: relative; top:-20px;" id="child"> <img src="/xxxx.png"> </div> </div> 上記のようなHTMLで ..┏━━━┓ ┏┃child.┃┓ ┃┗━━━┛┃ ┃parent....┃ ┗━━━━━┛ # child が parent をはみ出して上に出ている感じ上記のようなレイアウトを組んでいるのですが、(FF, Opera, Saferi, Google Chrome)では意図通り表示されるのですが、 IEでは以下のように表示されてしまいます。 .. ┏┳━━━┳┓ ┃┗━━━┛┃ ┃parent....┃ ┗━━━━━┛ # parent からはみ出ている child　が表示されない IEにおいても、他のブラウザと同じ表示になるようにしたいのですが、どうにかなりませんでしょうか。お手数ですが、ご教示お願いします。余談ですが、個人的にはIEの動きが自然と言えば自然な気はしています。。。

minira-
お礼率50% (2/4)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

みんなの回答

kirin_55
ベストアンサー率16% (1/6)

2009/03/12 16:45 回答No.4

透過が赤の部分のみでしたらできました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>div</title> <style type="text/css">  </style> </head> <body> <div id="box"> </div> <div id="footer_frame"> <div id="bottom_menu_frame"> <div class="bottom_menu_box" style="height:50px;">aa</div> </div> </div> </body> </html>

kirin_55
ベストアンサー率16% (1/6)

2009/03/12 16:20 回答No.3

可能ならfilterではなく透過PNGを使ってはどうでしょうか。 IE6は透過PNGに対応していないので使うなら下記を参照してください。 http://ziddy.japan.zdnet.com/qa4092678.html

質問者

お礼 2009/03/12 18:17

kirin_55様ご回答ありがとうございます。リンクまで貼って頂き、大変助かりました。今度、松井グッズが手に入ったらお礼に差し上げます。。。

askaaska
ベストアンサー率35% (1455/4149)

2009/03/12 15:59 回答No.2

これはIEのfilterの仕様ね。背景をimgにすることくらいしか思いつかないわ。もっといい回策はあるかもしれないけど今思いつくのはこれくらい。ゴメンね。

質問者

お礼 2009/03/12 18:16

有難うございました＞＜勉強になりました！ IEのバカァー１．parent をさらに grand parent で囲う２．parentの透過処理をやめて３．grand parent に透過処理これでうまくいくかなーと思ったら、全く別の理由でレイアウトが崩れてしまいました。 orz... 親の透過処理を子供が引き継ぐ仕様のはずなので、レイアウト崩れが直れば・・・と考えています。ご教示頂きました、透過画像につきましても検討しています！有難うございました。

askaaska
ベストアンサー率35% (1455/4149)

2009/03/12 14:50 回答No.1

あら、 IEでも同じように表示されたわよ。（コードはラスト）たぶん、もっと別のナニカが原因ね。 <html> <head> <style type="text/css">  </style> </head> <body> <div id="parent"> <div id="child"> </div> </div> </body> </html>

質問者

補足 2009/03/12 15:20

askaaska様ご回答ありがとうございました。より簡単に伝わるように簡易化したHTMLを貼ったら、再現できていませんでした。。。。すみません。ただお陰様で少し前進しました。以下が、問題のHTMLです（不要な箇所を取り除いています。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>div</title> <style type="text/css">  </style> </head> <body> <div style="width:100%;height:100px; border-bottom:1px solid #cccccc;"></div> <div id="footer_frame"> <div id="bottom_menu_frame"> <div class="bottom_menu_box" style="height:50px;"> aa </div> <div style="clear:both; font-size:1px; height:1px;"></div> </div> </div> </body> </html> 子供フレームのbottom_menu_frameの上半分が切れてしまっています。 askaaska様のご指摘を受けて、切り貼りしている間に気づいたのですが、どうやら、filter:alpha(opacity=80);　が問題らしく、filter:alpha(opacity=80);を取り除くと意図したレイアウトになってくれました。半透明は捨てがたいので、何とかしたいのですが、何かご存知の方いらっしゃいましたらご教示ください。