続・IEではなくFirefoxのみで発生するCSS styleトラブル : WebとPCのメモ帳

2009年10月
≪
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
≫
2009年12月

WebとPCのメモ帳
Web・Blog
ブラウザ
続・IEではなくFirefoxのみで発生するCSS styleトラブル

続・IEではなくFirefoxのみで発生するCSS styleトラブル

2008: 04/21(Mon)

Category

Tags

前回のエントリIEではなくFirefoxのみで発生するCSS styleトラブルにこんなトラックバックをいただきました。

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

検証：IEではなくFirefoxのみで発生するCSS styleトラブル？ (THE HAM MEDIA)

こちらでも再度検証してみましたので、結果を報告します。

大文字小文字の問題ではないのか？

このBlogでも検証してみる

ちなみに検証したバージョンは「Max Firefox2.0.0.14」

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

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

検証：IEではなくFirefoxのみで発生するCSS styleトラブル？ (THE HAM MEDIA)

というわけで、こちらも直した文字を全部小文字に直して見てみると……おっしゃるとおりスタイルが適用されています。修正したのを元に戻しただけなのに、なぜ元の状態に戻らないのか？確かに修正前はスタイルがまったく適用されていませんでした。

修正前のテンプレートをチェックしてみる

前回のエントリでも書きましたが、この問題はテンプレートの初期状態から発生していました。修正前のテンプレートはコピーして残っていますし、そもそも配布元さんは今現在同一テンプレートを使っています。

実はこの「本文内のスタイルシートが効かない問題」は、FC2 Blogだとかなり目立つトラブルとして見ることができます。Blogにコメント欄にJavaScriptを使う「カラーパレット」と「絵文字パレット」があるのですが、そのスタイルが無視されてコメント欄がとんでも無いことになってしまうのです。

ということで、テンプレート配布元さんのコメント欄をFirefoxで見てみると……上記の画像と同じ状態になっていることがわかります。つまり、現在のこのBlogのコードと、修正前のコードを見比べてみればいいわけです。

やはりメタタグの問題だった

結局なにが問題なのか？

少しわかりにくいですが、違いを見つけるのはそんなに難しくありませんでした。

現在のメタタグ部分(修正後)


<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />

修正前のメタタグ部分


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="style/css" />

「charset」の部分に目がいきやすいですが、問題はそこではありません。「Content-Style-Type」は小文字ですが、これもどうやら違うことがわかっています。となると残っているのは、「text/css」と「style/css」の部分しかありません。

よくよく思い返してみると、これを修正したとき打ち込むのが面倒で旧テンプレートからコピーしたような記憶があります。つまり、私は「Content-Style-Type」の小文字を直すつもりで当該部分を書き換え、それが「style/css」から「text/css」の修正に繋がり、結果として解決に繋がったのだと思われます。実際にこのBlogでも再度「style/css」に書き換えてみましたが、見事タグは効かなくなりました。この部分が原因で間違いないようです。

メタタグ部分に不正な文字を入れてはいけない

私自身は「Content-Style-Type」修正しただけのつもりだったので前回のエントリを書いたのですが、これは単なる勘違いでした。結論は「content部分に不正な文字を入れるとFirefoxではスタイルが無視される」です。

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

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

検証：IEではなくFirefoxのみで発生するCSS styleトラブル？ (THE HAM MEDIA)

というわけで、上記のハム♂さんの指摘が正しい情報です。さらに遡って考えれば、前回のエントリで引用した情報が解決するための方法そのものだったわけです。自分で意識していたかは別として、結果として同じ方法で解決したわけですしね。