- ベストアンサー
XHTML+CSS IE5.5で見ると崩れる
皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CSS を学ぶ際に必ずぶつかる壁だと思います。 IE5.5 では、width の計算方法が他のブラウザと違うのが原因です。 試しに #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; →→→ 0px margin-bottom: 5px; display: inline; } に変更するとどうでしょうか。 IE5.5 と IE6,7,8 の標準モードでは、width の計算方法が違うのが原因です。 下記のページが参考になると思います。 http://blog.open-arms.biz/200411/2431.php 他にも色々検索してみてください。
その他の回答 (2)
- ganmo717
- ベストアンサー率0% (0/10)
まず、対象ブラウザを決めましょう！ 全てのブラウザで同じように見せることは、不可能に近いです。 現在では、IE6 7とFF2以上とSAFARI、OPERAを対象するケースが多いです。IE8はまだ普及していないのであまり対象にしません。 IE6以下は、CSSを利かなくして良いです。 文書構造がちゃんとなっていれば大丈夫です。
お礼
お返事ありがとうございます。 ganmo717さんのおっしゃるとおり IE6 7とFF2以上とSAFARI、OPERAが対象にするサイトが多いですね。 やっぱIE6以下はもうあまり気にせずいきたいと思いますありがとうでした。
- nori_007
- ベストアンサー率35% (369/1048)
他に、DOCTYPE 宣言と、互換モード、標準モードも調べておくことをお勧めします。色々検索してみてください。 IE の互換モードには頭を悩ませます。 時には割り切りも必要だと思います。 個人的には、IE5.5 世代のブラウザはそろそろサポート外にしても良いのではと思っています。 参考になればと思います。
補足
お返事ありがとうございます。 DOCTYPE 宣言と、互換モード、標準モードを検索して調べてみました。 なんだか凄く難しいです＞＜ 少しずつ勉強していきたいと思います。 IE5.5世代はもうサポート外にしたいと思ってるんですが どうもチェックするときについIE5.5も確認してしまい レイアウトが崩れていると気になって気になって 頑張って少しずつ勉強していきたいと思います。 これからも宜しくお願いします。
お礼
#dのmargin-right:0px; にしてみましたが結果は同じでした＞＜ と書きましたが間違っていました。 #dのmargin-right:0px; にした所上手いこと出来ました。 しかしid"e"の右隅のところが少し隙間できてします。(IE5.5のみ) これぐらいは良しとしないとだめですよ？ もし改善方法とあれば伝授してくれると嬉しいです。
補足
お返事ありがとうございます。 #dのmargin-right:0px; にしてみましたが結果は同じでした＞＜ 紹介していただいたサイトを見させていただきました。 ボーダーの事が書かれていました。 そこで#aのボーダーを削除してみた所うまく表示できました。 ですがボーダー入れる為にあと4つものDIVが要るってなんだかなぁー。 いい方法なんいでしょうかね＞＜ すごく有力な情報ありがとうございました。