読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 0人
QRコード
QRCODE
タグクラウド
アクセスカウンタ

2009年11月18日

ブラウザごとの CSS の解釈の違い

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

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

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

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

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

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

Posted by vivi at 19:26Comments(0)CSS

2009年03月31日

IE6でmarginの指定

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

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

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

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

  

Posted by vivi at 18:00Comments(0)CSS