JeffreyFrancesco.org 公開日 タグ Tag Permalink 現在地 Facebook page Twitter RSS feed

「フォームの button と img と Firefox 4」というエントリを去年書いてまして、要は Firefox だけ button 要素に CSS で消せないパディングが付いてて、中の要素(テキストも含む)との間に隙間が入ってしまうのが場合によっては困るかなあという話なんですが、たまたま今日なんとなく normalize.css のソースとそのコメント部分の翻訳記事を読んでますと、その辺を解決するコードがしっかり含まれているのに気が付きました。

該当部分は次の部分で、最新バージョンでいうと470行目以降。

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

::-moz-focus-inner という独自な疑似要素があるようです。コメント内にある URL を読んでみると、これが四方に1pxのボーダーと左右に2pxのパディングを設定しているようです。なのでこいつをリセットしてやればいいという訳ですね。先のエントリ書いた時にアップしたテストコードに適用して Firefox で確認したところ、無事に隙間が消えてくれました

上は前回と同じコード、下は ::-moz-focus-inner 疑似要素にリセットをかけたもの。上で空いていた画像とボーダーの隙間が、下では消えているのが確認出来ると思う

そんな訳で、ほぼ一年越しで悩みが解決したことですし、これで今夜はゆっくり寝られそうです。涙