Happy Swing

2007年3月14日

MacOS10 Safari用のCSSハック

CSSでコーディングしていると、ぶち当たる壁が「ブラウザの違い」。OSで違うのはまだしも、ブラウザ毎にも若干表示が変わります。
大別すると、「Win IE6」「Firefox Opera」「Mac IE5.x」かな・・・まぁ、ほとんどは同じように表示させられるんですけど、どうしても難しいのがテキストフォント。
フォントサイズはどうしてもOSやブラウザで異なってきてしまいます。WinXPとMacで表示されるフォントが違うっていうのがやはり一番大きいのですが、それ以上に厄介なのが「Safari」の存在。
「Safari」に使われているフォントが、どうしても他のブラウザと比べると一回り大きいフォントになってしまうんです。
そこで、Safariだけを除外するハックを探しました。

.クラス名{font-size:1.0em;}    →設定したい値
/* \*/
html*.クラス名{
	[font-size:1.0em;
	font-size:0.9em;    →MacOS10 Safari用に設定したい値
	]font-size:1.0em;
}/**/
* html .クラス名{font-size:1.0em;}

だったと思いますｗ
ずいぶん前に見つけたものなので、「なんでそうなるのか」という詳しい理由は忘れましたが、これでSafariだけハックすることが出来ます。
私がよく使うのは、例えばドロップダウンのメニューを画像ではなく、テキストメニューとしてCSSで作る場合、横幅や縦幅をIEやFirefox、Operaにあわせてしまうと、どうしてもSafariでズレが生じてしまうんですよね。
「ブラウザごとに表示が違うから」で納得してくれるような人ならステキなんですが、そうは行かないのが世の常。
というわけで、フォントサイズが一律にならない！って困ったときにはSafariをハックしてあげましょう。