Yahoo UI Libraryのfonts.csについて

質問

Yahoo UI Libraryのfonts.cssについて質問です。
http://developer.yahoo.com/yui/fonts/

table {
font-size: inherit;
font: 100%;
}

fonts.cssの中の、上記「font: 100%;」というのがよく分かりません。
この部分ではなにをやっているのでしょうか？

よろしくお願いします。

回答No.2

noname#66720

IEにだけ効果のあるCSSハックだと思います。
たしかx-smallが13px相当だったと思うので。

IEではフォントをpxで固定してしまうと、ユーザー側で文字の大きさを変えても反映されない仕様になっているので、別の指定方法で上書きすることでそれを回避しているのでしょう。

回答No.1

noname#66720

まず、fontはfont-familyとfon-sizeの値を書くのが必須です。
これを書かなければ本来は認識しません。
ですが、IEの互換モードおよび5.5以下のブラウザではこれを認識してしまいます。
そして確認してみると、それらのブラウザでfont-size:inherit;の値は有効になっていません。
その修正だと思われます。

ちなみにfont-size:inherit;の指定はサイズをそろえるだけでなく、IEのline-height等のバグを修正するためのものでもあるようです。

http://www.soratomo.com/xoops/modules/xpwiki/?CSS%2FYUI%A4%C7%A5%D5%A5%A9%A5%F3%A5%C8%A5%B5%A5%A4%A5%BA%A4%F2%C2%B7%A4%A8%A4%EB

お礼

回答ありがとうございます。
参考になりました。

もう一つ質問なんですが、下記の「*font: x-small;」と「font: 100%;」なんですが
この2つの処理の違いはなんでしょうか。

body {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
*font-size: small;
*font: x-small;
}

table {
font-size: inherit;
font: 100%;
}