https でアクセスした時に、Chrome だけ CSS ファイル(スタイルシート)が適用されない理由。

スタイルシートが効かない現象

SSL (https:// ) でWebページを表示する際、CSSファイルのパスが非SSL( http:// )だとセキュリティ上の制限 (暗号化されていない要素は表示しないよん。)でスタイルが適用されない場合がある。

しかし、他のブラウザでは問題が出ないのに、Chrome だけでこの問題が起こるページがあり、原因がよく分からなかった。
スタイルシートは https サイトでも http サイトと同じパスで公開しており、CSS ファイルへのパスは以下のようにサーバルートからのパスで指定しているので、SSL 配下のファイルを取ってくれる筈だのに。

Chrome だけCSSが適用されない原因

これも(ご多分に漏れず)しばらく放置していたのだが、この間しげしげとサイトを眺めていたら原因が分かった。

うまく行かないページには、<base> タグで http:// で始まるURLが指定されているのだ。

ブラウザでソースを表示させると <link> タグに指定されているスタイルシートへクリックでアクセスできるのだが、Chrome の場合は http:// 配下のスタイルシートが別ウィンドウで開いた。

Firefox、Safari で確認したら、自分がいる場所、つまり https:// 配下のページのソースを表示させているのであれば、<base> タグの指定に関わらず、<link> タグの方は https:// のスタイルシートが開いた。

ああすっきり。