a with p

仕事でいつも泣かされるのがFirefoxとIEのブラウザ表示の差。俗に言うブラウザ崩れです。

今まで何となく思っていたことが、今回のブラウザ崩れ修正で確信に変わったので備忘録。

aタグはインライン要素なので基本的にそのまま置くことは禁止されているので、多くの場合pタグで囲みます。

その際に、aタグにcssでmarginを掛けても、IEでは効かないようです。

面倒であっても

p.bnr { margin: 50px 10px 0 200px;}

p.bnr a {

  display: block;

  width: 300px;

  height: 20px;

  background: url("../img/aaa.jpg" 0 0 no-repeat);

  text-indent: -9999px;

  outline: none;

}

とやらないといけないみたいですね。Firefoxではp.bnr a の中にmarginの設定をしても効きます。

ブラウザチェックは現在、Firefox3、IE7、IE6(Multiple IE)で行いますが稀に大丈夫だろうという慢心からFIrefoxのみのチェックで終わる輩がいますが、これからはもう少し締めて行かないといけないと思いました。

あとはIE8が怖い・・・