- ベストアンサー
スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
いろいろ勘違いしているので、#1は無視してください。 .box0 { width:300px; height:300px; background-color:#000000; } .box1 { position:relative; left:50px; top:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { width:100px; height:100px; position:relative; left:50px; top:50px; background-color:#00ff00; }
その他の回答 (3)
- Pesi
- ベストアンサー率63% (7/11)
IE6用のスタイルとその他のブラウザ用にCSSを別途作成するのもひとつです。 html>body .box0 { 別途CSS } この指定だと、BOX0に対してIE７とモダンブラウザに対してはこのCSSを適用する、という意味合いになります。 直接的な解決方法ではありませんが、困ったときにIE6とそれ以外と割り切ってCSS書けるのでたまに使ってます。 参考箇所は、下記URLの"CSSハック"に記載されてます。
お礼
アドバイスありがとうございました。 CSSハックで対応できるかなと思っていましたが、 なるべくブラウザー固有な設定は避けたいと思い 今回の件ではハックは使わない方針です。
- tenderfeel
- ベストアンサー率56% (215/379)
marginの貫通はpaddingを入れれば治ります。 .box0 { width:300px; height:299px; padding-top:1px; ←これ background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:199px; padding-top:1px; ←これ background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; }
お礼
アドバイスありがとうございました。 回答に従い実装した所、意図通りに表示出来ました。
box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin:50px; padding:50px; background-color:#ff00ff; } .box2 { background-color:#00ff00; }
お礼
アドバイスありがとうございました。 回答に従い実装した所、意図通りに表示出来ました。