safariでのcssデバッグ

HTML Design

CSSを編集していてsafariだけ上手くいかないってことがあるとき、

#foo {
  border-width: 1px;
  border-style: solid;
  border-color: #ff0000;
}
#bar {
  border-width: 1px;
  border-style: solid;
  border-color: #00ff00;
}

という感じであやしい部分にボーダー線を表示させてsafariで見てみるのが一番かもしれない。

FirefoxのFirebugみたいなツールがsafariにあればいいのですが、あるんでしょうか？どなたか知っていたら教えてください。

で、safariだけうまくいかないのがわかった事例。

#header h1 {
  text-indent: -9999px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
}

という感じでh1を見せないようにしている場合(これがいいかどうかはまた別問題だが)、safariのみh1の高さをちゃんと獲ってくれるみたい。

そのため、

  height: 0px;

をsafariのために追加する。

safari on Windows の正式リリース、期待してます。＞ Apple殿