Firebugのボックス表示がずれちゃう問題。

2009年1月13日
- css
- firefox
- firebug

Web制作に関わる人必携のFirefoxプラグイン「Firebug」の機能の一つに、HTML中の要素にカーソルを合わせると、ページ中の対応する部分が半透明のボックスで示される、というものがある。複雑なページをハックするときや、CSSによるレイアウトの確認などに非常に便利だ。

しかし、一部のサイトでそのボックスがずれて表示されてしまう場合がある。調べてみた結果、対象となるページのCSSで以下のような記述があった。

div {
    margin-bottom:15px;
    margin-left:10px;
    margin-right:10px;
}

どうも、Firebugのボックスはdivで表示しているらしく、ページ中すべてのdivにかかる上のcssが適用されてしまい、本来の位置とはずれて表示されてしまうらしい。

普通、クラスもidも指定せず、すべてのdivにマージンを設定することはめったにないと思うので、これが問題となることは少ないだろうが、一応、解決策を書いておく。

解決策は、Firebugが表示するdivブロックのcssにmargin:0;を設定する、というものである。対象となるcssファイルは以下の位置にある(Windowsでデフォルトの設定の場合)。

C:\Documents and Settings(ユーザ名)\Application Data\Mozilla\Firefox\Profiles(英数文字列).default\extensions\firebug@software.joehewitt.com\content\firebug\highlighter.css

これの51行あたりからを、以下のように変更する。

  .firebugLayoutBoxOffset {
      z-index: 2147483647;
      position: absolute;
      opacity: 0.8;
+     margin: 0;
  }
  .firebugLayoutBoxMargin {
      background-color: #EDFF64;
+     margin: 0;
  }
  .firebugLayoutBoxBorder {
      background-color: #666666;
+     margin: 0;
  }
  .firebugLayoutBoxPadding {
      background-color: SlateBlue;
+     margin: 0;
  }
  .firebugLayoutBoxContent {
      background-color: SkyBlue;
+     margin: 0;
  }

これで正しく表示されるはず。