HTML / XHTMLコミュの各ブラウザー対策はどのようにされてますか？

firefoxを基本よく利用するのでそのブラウザーだけを見てHP創り上げたのはいいんですが、IEで見るとひどい状態に...
各ブラウザーによってこんなに違うと思わず修正してるんですが一部が直りません...
marginとか入れてないのに謎の余白があるのです...
各ブラウザーごとにCSSを作成して対策したのですがなんでできないのでしょうか？
教えて下さい！！！！

また、みなさんは最初にどんなブラウザー対策をされますか？
基本的なことだと思いますが教えて頂けると今後約に立ちます！！

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 01月12日 16:26

Reset CSSを使って、後は複雑なことをさせないとか。

ie6はレイアウトの崩れがなければいいかな…ってくらいで考えています。

[2] mixiユーザー 01月12日 22:19

同じくreset.cssを適用させ、あとはIE(特に6、7)用にはハックを使います。
慣れてくると崩れのクセがわかってくるので、ハックをほとんど使わずにcssを組むことが出来るようになりますよ。

[3] mixiユーザー 03月16日 21:37

BOXの概念の違いを勉強されると対策しやすいかと思います。

異なるﾌﾞﾗｳｻﾞで同じ様に表示させるのは難しく、一つ一つのﾌﾞﾗｳｻﾞでの表示環境を理解していかなければ出来ないので、主要ﾌﾞﾗｳｻﾞでの表示をメインに、頑張りましょー(´-ω-｀)。

FireFoxで、IEでご覧に…等、ﾌﾞﾗｳｻﾞを自分側から指定して見ていただくのも一つの手段だとおもいます。

[5] mixiユーザー 03月16日 22:18

> DZ.＠dz11さん

どーするんでしょーね(´-ω-｀)。
mobile用、PC用で分けるページを最初に表示とかぐらいしか思いつかないです。

[6] mixiユーザー 03月17日 02:38

実際にソースを見ないことにはなんとも言えないのですが
marginを指定していないのに謎の余白があるのはmargin 0を指定しても出てしまう感じなのでしょうか。
画像の下に余白ができてしまうのであればimg要素にvertical-align: bottomを設定すれば消えると思われます

僕はreset CSSを使ってFireFoxでコーディングしてIEの調整をあとからやってます。

IE6はもうターゲットから外し、どうしようもなくなったら対象ブラウザのhackですね。
IEは互換表示モードとかもあるのでmetaタグで標準モードを指定して互換モードのボタンを消したりもしてます。

IEの互換モードもターゲットにいれるのであればKATUさんの言っているブロックレベル要素のwidthとpaddingの解釈の違いを理解しておいて損はないかと。

僕は完璧に同じに見せようとはせずに各ブラウザで文章がちゃんと読めて意味が伝えられる状態なら多少のズレは許容範囲だと思ってます。

mobile用PC用スマホ用はそれぞれ違うページを用意してxhtmlではないですが.htaccessのmod rewriteを利用してUserAgentで301リダイレクトして振り分けてます

ってここまで書いて気づいたのだけど2ヶ月前のトピックか・・・
まぁ書いてしまったので投稿。

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