IE&FireFox&Opera 頭の痛いスタイルシート設定

スポンサーリンク
スポンサーリンク

現在大掛かりなサイト構築作業の真っ最中なのですが、今回は全面的にスタイルシートを利用してレイアウトしています。今までテーブルレイアウトにすっかり慣れきってしまっていた自分にはとても勉強になる作業なのですが。。。
ブラウザによってスタイルシートの解釈が違うのが何ともはや・・・
今でも一番使われているであろうIE(インターネットエクスプローラー)をメインに確認をしていたのですが、そうするとFireFoxでプレビューした場合に著しくレイアウトが崩れる場合があります。
特にボックス内側の余白(padding)と、外側の余白(margin)には、注意が必要。
IEでは、ボックスの内側に余白(Padding)を指定した分だけつくりますが、FireFoxではボックスに指定した余白分のピクセルを足してその内側に余白を作ります。書いているうちにもこんがらがりそうですが。
とにもかくにも、メインで確認するブラウザをFireFoxにして、その後にIEで確認するようにした方が良さそうです。
ブラウザを選べるのは、使う側にはとても良い事だと思いますが、サイトを製作する側にとっては負担が増える事であまり好ましい事ではありません(笑)

コメント

  1. @ndy より:

    そう、IEがおかしいんですよね(笑)

    僕も同じでIEでちゃんと表示され、FirefoxやOperaでみたらアボーンみたいな事あって以来、全く逆な形でCSSレイアウトをする様になりました。

    一応、CSSハックなるものがありますが、何かよく分からなくて..
    Mac版、Win版ともにIE5.x系のブラウザは勘弁です(笑)

  2. 管理人 より:

    でもね。
    クライアント(だけではなく一般的なユーザー)のほとんどがIEを使っているのですよ。
    IE(インターネットエクスプローラー)と言っても分からないくらい(笑)
    WEBサイトの横幅を決めるのもそうですが、今現在のスタンダードを探る作業は難しいですね。

  3. どうも、初めまして。ドリームエージェントと申します。
    自分は、以前Web制作会社で制作していた時に、CSSには苦労しました・・

    自分がしていたやり方は、DTDの宣言を標準モードにして、
    CSSの最初に、
    * { margin: 0px; padding: 0px; }
    を書いて、すべての要素のマージン&パディングを0pxにしておくと、作り易いです。^^

    ■文書型宣言と表示モードの参考にどうぞ^^
    http://desperadoes.biz/style/mode.php
    参考にして頂けたら幸いです。

    過去に、全部CSSでレイアウトして作ったサイトです。
    http://dento.cc/

    ちょっとCSSを変えたサイトです。
    http://662.jp/

    ※現在は、自分ではなく、制作会社が運営しています。

    それでは、これからも宜しくお願い致します。

  4. 管理人 より:

    >ドリームエージェント さん

    コメントありがとうございます
    参考にさせていただきますね

タイトルとURLをコピーしました