viviのホームページ作成奮闘記

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

各ブラウザの動作は共通ではありません。
そのために、自分でチェックしたブラウザでは特に問題なかったものでも、
見る人のブラウザの違いによってレイアウトが崩れているということが結構
あります。

すべてのブラウザでチェックするのが望ましいですが、MacまたはWinを持
っていなかったりするとまず全ブラウザをしらべるのは不可能です。
なので、現状では IE6、IE7、IE8、Firefox、Win 版 Safari、Opera あたり
のブラウザでチェックすれば、見る人のほとんどの環境を網羅できるので問
題ないと思います。

各ブラウザ（IE とか Firefox とか）には、デフォルトスタイルシートという
ものが存在します。これは、各ブラウザが独自に持っているスタイルシートの
ことです。すべてのブラウザで、このデフォルトスタイルシートは共通では
ありません。

この初期化をしていないと、IE にはない余白が、Safariでは余白がある！
なんてことになります。ひどいものでは背景にかくれてボタンがクリック
できない！なんていうのもあったりします。
また、一見同じに見えても微妙に行間に差があったりフォントが違ったりと
よくみると「見え方違う！」という風に気づくと思います。

デフォルトスタイルシートを初期化するのは簡単です。
主要なセレクタ（p とか div とか）に対して個別にスタイルを指定した
初期化用 CSS を作成して、デフォルトスタイルシートを上書きするだけです。

検索で「css　初期化」などとキーワードを入力すれば結構でてきます。
  

IE6で、floatで指定した値と同じ方向にmarginの指定をすると、
指定値の倍程度になってしまうバグがあります。非常にやっかいですね…。

IE系のブラウザはバグが結構ありますが、このバグは代表的なバグでもあります。
対処方法は、

・marginの代わりにpaddingを使う
・親要素でpaddingを取る
・display: inline;を指定する　　　　　　等々…。

IE8はどうなのかな…。
またご報告します。