Firefox 3.5のCSSの変わったとこ
2009/07/07 12:18
さっき入れていきなり気づいたとこがあったのでメモ。
まず、CSS3のtext-shadowが適用されるようになっています。
@font-faceも対応されていますね!
だいぶ変わったとこ。
例えば、aタグに別窓やポップアップでリンクをする場合、外部リンクですよーってアイコンを付加してあげるとおもうんですが、その時のソース。
CSSソース
a[target] {
background:url(../img/ico/ico_brank.gif) no-repeat right center;
padding-right:15px;
}
上記のソースで
![]()
このように表示されていたんですが、Firefox3.5にしたらおかしなことに。。。
![]()
こんなになっちゃいました。
backgroundのpositionを命令している部分を数値にしてみても改行されたような感じで表示されてしまったり、おかしな挙動になってしまいます。。。
なので、とりあえずの回避方法として
CSSソース
a[target] {
display:inline-table;
background:url(../img/ico/ico_brank.gif) no-repeat right center;
padding-right:15px;
}
「display:inline-table;」を使います。そうすると、意図していた表示になると思います。
ただし、Safariで確認すると、上寄りになってしまうためあまり使えません・・・。
後、「em」タグもおかしな挙動になっています。
ブロック要素?みたいになっていてさらにmargin-bottomも勝手に取っています。
これも「display:inline-table;」でとりあえずは回避できますが、検証が必要です。
さらに、「label」タグもおかしいです。。。
これは少し大変なバージョンアップだったんではないでしょうか。
何かわかり次第、更新したいと思います。
Firefox3.5の詳しい変更点はコチラをご覧下さい。
Firefox 3.5 for developers
Category : CSS , Firefox
Tags : CSS, display:inline-table;, Firefox 3.5
Track Back URL
コメントをどうぞ♥