- ベストアンサー
WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
display: inline; 理由は不明ですが、 上記１行を追加した処、 floatを外した状態と同じ位置に表示できました。 とりあえず、「margin-left: 8px;」の件は これで対処できると思います。 他にもブラウザ毎で振る舞いが異なる処がある様ですが、 いろいろパターンがありすぎて その都度、対処するしかなさそうです。 「float」の使用は大変そうですが、 がんばっつて下さい。 当方の検証ブラウザ IE6 Opera7.23 Mozilla1.4.1 OS:windows xp
その他の回答 (1)
- leaz024
- ベストアンサー率75% (398/526)
それはWindows/IEのバグのようですね。（参考URL参照） padding ならば大丈夫のようなので、デザイン上問題なければ padding に代えてみてはどうでしょうか。
お礼
参考URLありがとうございます。やはりバグなんですね。 paddingだとデザイン上問題があるので、marginで何か良い解決方法はないでしょうか。
お礼
おおっ！ありがとうございます。解決できました！ でも「display: inline;」ってデフォルトですよね…、謎ですね。 IE4以降、NN4以降の色々なブラウザで見てみましたが、問題なさそうです。 ありがとうございました！
補足
お礼書いてから気づきましたが「IE4以降、NN4以降」というのは、IE4とNN4を含みません。 これらを気にしていたら何も出来ませんからね。