続 検証：IEではなくFirefoxのみで発生するCSS styleトラブル？
昨日「検証：IEではなくFirefoxのみで発生するCSS styleトラブル？」を書いたのですが、
ネタ元のRPMさんがさらに検証をされていたので、僕もみてみました。
原因は大文字小文字ではなかった
というわけで、こちらも直した文字を全部小文字に直して見てみると……おっしゃるとおりスタイルが適用されています。修正したのを元に戻しただけなのに、なぜ元の状態に戻らないのか？確かに修正前はスタイルがまったく適用されていませんでした。
続・IEではなくFirefoxのみで発生するCSS styleトラブル
やはりここは検証した通り、
大文字小文字が原因ではなかったのですね。
僕個人としては、それだけでもわかっただけでかなり十分安心でした。
では、何が原因だったのか？
「charset」の部分に目がいきやすいですが、問題はそこではありません。「Content-Style-Type」は小文字ですが、これもどうやら違うことがわかっています。となると残っているのは、「text/css」と「style/css」の部分しかありません。
続・IEではなくFirefoxのみで発生するCSS styleトラブル
ということは、昨日の検証通りで、
meta情報のcontentが「content="text/css"」以外だったようだ。
実はこの「本文内のスタイルシートが効かない問題」は、FC2 Blogだとかなり目立つトラブルとして見ることができます。Blogにコメント欄にJavaScriptを使う「カラーパレット」と「絵文字パレット」があるのですが、そのスタイルが無視されてコメント欄がとんでも無いことになってしまうのです。
続・IEではなくFirefoxのみで発生するCSS styleトラブル
それでいいのか！？FC2・・・
というよりも、単なるミスのようなので、
テンプレートにしろ修正さえすれば大丈夫ですね。
事例検証
今回の件の例として、「レッツFC2ブログ！」というサイトがあがっていたのでみてみた。
Firefoxで見た場合
その他のブラウザで見た場合
やはりメタタグがおかしくなっているようで、
styleが適応されていませんでした。
やはり昨日検証した通り、metaタグ内のcontentの値が違っている。
text/css以外の指定は表示されないのだろうか？
もう少し検証
さらにいろいろな場合を検証してみた。
- ・content="style/css"の場合 → ×
- ・content="text/stylesheet"の場合 → ×
- ・content="text/javascriptt"の場合 → ×
- ・content=""の場合 → ○
- ・contentをつけなかった場合 → ○
- ・その他何か入れた場合 → ×
何も入れないか、きちんとtext/cssを入れる以外、
Firefoxではうまくstyleが適応されなかった。
Styleをjavascriptで表示するってありかなとか思ったけど、
結局表示できなかった。
スタイルはCSSだけだってことなんですね。
結局のところ
まとめとしては二点！
・Content-Style-Typeはcontent="text/css"以外指定しない
・style属性は利用せず、cssファイルにて指定
ブログの場合はstyle属性使わないで、
CSSを直接編集するのはだいぶ手間になる。
なのでメタタグを間違いさえしなければ問題ないだろう。
参考サイト・ブログ：
