[WordPress.com] Firefox のCSS ハックについて

ウェブサイトを CSS カスタマイズするとき、一部のブラウザだけの表示を修正したい、という場合があります。その手段のひとつとして、CSS ハックを使ったりすることがあるようです。

今回は、Firefox での表示だけを修正したい(経緯・動機は「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –」参照)ので、Firefox だけ CSS 編集できる方法について検討してみました。

今回は、とりあえず、以下の記事のものを参考にしてみたいと思います。

sgsdgadgd-1
CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス

上の記事によると、後ろの方に「, x:-moz-any-link」を追加すればいいような感じですので、

dgafdadfa

カスタム CSS で、以下の CSS を追加して、実際に効くかどうか試してみます。

p {
	color: blue;
}

/* Firefox */
p,  x:-moz-any-link {
	color: red;
}

以下、結果です。

sgadsgsag
mac の Safari

sgsgsda
Windows 7 の ie10

afasdfs
mac の Google Chrome

adfafasdf
mac の Firefox

sadfafsadf-1
Windows 7 の Firefox

なんとなく OK っぽいです。

そういうわけで、Firefox での表示だけ修正したいときは、「, x:-moz-any-link」を付け加えればうまくいくかも、という話でした。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。