検証:IEではなくFirefoxのみで発生するCSS styleトラブル?
ネタ元:IEではなくFirefoxのみで発生するCSS styleトラブル
そんなことが起こるのか!?
なんて疑問に思ったので検証してみた。
検証と結果
以下サンプルとFirefoxで表示してみた結果のスクリーンショットです。
ちなみにベースはここのブログのHTMLとCSSです。
サンプル:Content-Style-Typeの場合
Firefoxでのスクリーンショット
サンプル:content-style-typeの場合
Firefoxでのスクリーンショット
みてわかるように、Firefoxで問題なく表示された。
ちなみに検証したバージョンは「Max Mac Firefox2.0.0.14」
つまり、小文字と大文字でのStyle属性適応に違いは特にない。
参照元のサイトのようにblockquoteでも囲んでみたが問題なく適応された。
参照元のサイトが現在修正されてしまっているのでなんとも言えないが、
この問題はどうして起こっていたのか謎なままだ。
その前に一つ疑問
引用されていたサイトの、「content="text/stylesheet"」 ってなんだ?
そもそもtext/stylesheetというものが基本的にない。
正解はtext/cssで、上記の書き方だとFirefoxだとstyle属性が無視される。
(でもlinkで指定しているCSSは適応される。)
サンプル:text/styleseetの場合
Firefoxでのスクリーンショット
ちなみにおまけでその一行を丸ごと消してやってみたが、
その場合はきちんとStyle属性が適応された。
text/cssを間違えて何か別な文字やスペルミスした場合は
サンプルと同じように適応されなかった。
(これもFIrefoxだけの話。他ブラウザはそれでも表示される。)
つまり、meta情報でも書いた場合は間違えないようにしないと
上記のようなエラーが起こるようなので要注意ということだ。
結論と考察
同じ状況を再現できなかったので本題については不明!
結局同じ状況を再現できなかったのでこの現象については結局謎だ。
しかし、小文字でも問題なく表示されることがわかっただけでも一安心。
なんてったって、以前小文字にして作ったサイトあったから。。。
でも、基本通りこれはここは頭を大文字で書いていたほうが良さそうですね。
それとcontent=""の中身も間違えないようにってことだ。