DN*BLOG

2009.7.7

Firefox 3.5のCSSの変わったとこ

さっき入れていきなり気づいたとこがあったのでメモ。

まず、CSS3のtext-shadowが適用されるようになっています。
@font-faceも対応されていますね!

だいぶ変わったとこ。
例えば、aタグに別窓やポップアップでリンクをする場合、外部リンクですよーってアイコンを付加してあげるとおもうんですが、その時のソース。

CSSソース

a[target] {
	background:url(../img/ico/ico_brank.gif) no-repeat right center;
	padding-right:15px;
}

上記のソースで
firefox30_01
このように表示されていたんですが、Firefox3.5にしたらおかしなことに。。。

firefox30_02

こんなになっちゃいました。
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

FavoriteLoadingAdd to favorites

Category : CSS , Firefox

関連する記事