Firefox用CSS

Mozilla Firefoxの表示をスタイリッシュにするCSSです。

Macでmixiのトップページなど、画像を用いたクリッカブルマップなページを見ると、画像同士の隙間が空くのが気に入らないのです。
Windowsではこういったことが無いので、最初はMacのフォントの問題かなと思って色々試してみましたが、根本的にはどうもそうではないみたい。
（ちなみにMacBookに付属しているOfficeのMS ゴシックやMS Pゴシックにすると解消されましたけど）
色々調べていくうちにいつものように脱線してしまい（笑）、FirefoxのフォントをSafari風に定義するCSSを見かけたのでそれを適用してみました。
そうしたら、上記の画像の問題も解決されました。

適用にはExtensions（機能拡張）のStylishを使うと楽です。

ちなみに、Safariでも画像ズレが起きるのですが、同じCSSを適用してやると解消されます。
Safariで使用する場合は、テキストエディタで文字コードをUTF-8にしてCSSファイルを保存してください。

使用上、余分な定義は削除するなり、好みに合わせて定義するといいと思います。

ーーー次の行からーーーーーーーーーーーーーーーーーーー

@charset ‘utf-8′;

/* HTML “body” Element (Set page default fonts) */
body {
font-family: ‘Lucida Grande’, sans-serif;
}

/* Text Module (Proportional), */
h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja), h6:lang(ja), address:lang(ja), blockquote:lang(ja), div:lang(ja), p:lang(ja) {
font-family: ‘Lucida Grande’, sans-serif;
}

/* Text Module (Monospace), */
pre:lang(ja), code:lang(ja), kbd:lang(ja), samp:lang(ja) {
font-family: ‘Monaco’, mono-space;
}

/* Presentation Module (Monospace) */
tt:lang(ja) {
font-family: ‘Monaco’, mono-space;
}

/* List Module */
li:lang(ja), dt:lang(ja), dd:lang(ja) {
font-family: ‘Lucida Grande’, sans-serif;
}

/* Table Module */
caption:lang(ja), th:lang(ja), td:lang(ja) {
font-family: ‘Lucida Grande’, sans-serif;
}

/* Forms Module */
input[name], input[value], select[name], option, textarea, button, fieldset, label, legend, optgroup[label] {
font-family: ‘Lucida Grande’, sans-serif;
font-size: 11px;
}

/* Link color */
a:link {text-decoration: none}
a:visited {text-decoration: none}

ーーー上の行までーーーーーーーーーーーーーーーーーーー

このエントリーを書いている途中でブラウザがクラッシュしてしまったので、参考にしたサイトを見失ってしまったのですが（履歴にも残っていなかった…orz）、確か元は２ちゃんのスレに掲載されていたものだと書かれていました。
このCSSの本来の目的は、FIrefoxではフォントの設定で指定したフォントで全ての表示を行うのですが、半角英数字を表示する際に奇麗なフォント（ここではLucida Grande）を用いるようにするためのものです。全角文字などはsans-serifで指定されているフォントが使用されます。

ちなみに、最後のLink colorの定義は私が追加したもので、Safariでリンクの下線（アンダーライン）を表示しなくするものです。