同じレンダラであってもブラウザによってサイト表示が異なる

最近、ソーシャルネットワーク上(主にTwitter)での活動を控えて、WEBページ制作を行なっている。

以前のブログで、テンプレートが完成したといった話題に触れたが、新たな問題が発生した。

関連記事:ブラウザでWebサイトを正しく表示させるとデザイン限られる

インターネットブラウザのうち、Microsoft Internet Explorer、Mozilla Firefox、Apple SafariOpera browserでは、意図したデザイン通り表示された。

しかしながら、私が普段から使っているGoogle Chromeでは、下部の【margin】がうまく作用していない。

少し前にも取り上げた「Html Validator」(文法チェックツール)でも何度か確認しているが、「0個のエラー0個の警告」だったので、基本的な部分では問題はない。

おそらく、ブラウザ独自の機能によってデザインがズレてしまうものと思われる。

そこで、登場するのがリセットCSSとフォントCSS。

あらかじめ、デフォルトの状態をリセットした上で(グローバルリセット)、必要な部分を設定をする方法である。

リセットCSSは、「YUI 3: CSS Reset」や「Eric Meyer Reset CSS」などが有名だ。

また、リセットせずにその都度設定する「Vanilla CSS Un-Reset」といった方法も存在する。

「Eric Meyer Reset CSS」を元にカスタマイズしたものを作る予定だが、上手く行くことを願っている。

その後、色んなリセットCSSを試した上で、「HTML5 Reset Stylesheet」に落ち着いた。