THE HAM MEDIA BLOG

検証:IEではなくFirefoxのみで発生するCSS styleトラブル?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
Firefox
ブラウザ
CSS
STYLE

ネタ元:IEではなくFirefoxのみで発生するCSS styleトラブル

検証:IEではなくFirefoxのみで発生するCSS styleトラブル?

そんなことが起こるのか!?
なんて疑問に思ったので検証してみた。

検証と結果

以下サンプルとFirefoxで表示してみた結果のスクリーンショットです。
ちなみにベースはここのブログのHTMLとCSSです。

サンプル:Content-Style-Typeの場合
Firefoxでのスクリーンショット
Content-Style-Typeの場合

サンプル:content-style-typeの場合
Firefoxでのスクリーンショット
content-style-typeの場合

みてわかるように、Firefoxで問題なく表示された。
ちなみに検証したバージョンは「Max Mac Firefox2.0.0.14」

つまり、小文字と大文字でのStyle属性適応に違いは特にない。
参照元のサイトのようにblockquoteでも囲んでみたが問題なく適応された。

参照元のサイトが現在修正されてしまっているのでなんとも言えないが、
この問題はどうして起こっていたのか謎なままだ。

その前に一つ疑問

引用されていたサイトの、「content="text/stylesheet"」 ってなんだ?

そもそもtext/stylesheetというものが基本的にない。
正解はtext/cssで、上記の書き方だとFirefoxだとstyle属性が無視される。
(でもlinkで指定しているCSSは適応される。)

サンプル:text/styleseetの場合
Firefoxでのスクリーンショット
text/stylesheetの場合

ちなみにおまけでその一行を丸ごと消してやってみたが、
その場合はきちんとStyle属性が適応された。
text/cssを間違えて何か別な文字やスペルミスした場合は
サンプルと同じように適応されなかった。
(これもFIrefoxだけの話。他ブラウザはそれでも表示される。)

つまり、meta情報でも書いた場合は間違えないようにしないと
上記のようなエラーが起こるようなので要注意ということだ。

結論と考察

同じ状況を再現できなかったので本題については不明!

結局同じ状況を再現できなかったのでこの現象については結局謎だ。
しかし、小文字でも問題なく表示されることがわかっただけでも一安心。
なんてったって、以前小文字にして作ったサイトあったから。。。
でも、基本通りこれはここは頭を大文字で書いていたほうが良さそうですね。

それとcontent=""の中身も間違えないようにってことだ。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

続・IEではなくFirefoxのみで発生するCSS styleトラブル
Excerpt:  前回のエントリIEではなくFirefoxのみで発生するCSS styleトラブルにこんなトラックバックをいただきました。 そんなことが起こるのか!? ...
Weblog: WebとPCのメモ帳
Tracked: 2008-04-23 00:09

トップに戻る