【Plone】ブラウザによってCSSを使い分ける

【現象】
職場の PC から、自分のサイトを見てみたら以下のようになっていた

パーソナルバー異常

あれれ?
家では普通に見れるように設定したのに・・・

そこで、職場と自宅のPCから異なるブラウザで正常表示の有無を調査しました

IE、Sleipnir、Firefox、Opera と四つのブラウザをそれぞれ試してみると
どうも、IE のみ閲覧時正常表示されないよう
以前レイアウト調整をするときはFirefox からブラウジングして合わせたからだ

 
【環境】

PCbrowserversionbuildengine
職場-WindowsIE8.06001.18702Trident/4.0
Sleipnir2.9.32903400Trident/4.0
Firefox3.5.920100315Gecko/1.9.1.9
Opera10.533374Presto/2.5.24
職場-LinuxFirefox3.0.182010021718Gecko/1.9.0.18
Opera10.104742Presto/2.2.15
自宅-WindowsIE8.06001.18904Trident/4.0
Sleipnir2.9.22902400Trident/4.0
Firefox3.6.320100401Gecko/1.9.2.3
自宅-LinuxFirefox3.0.182010021718Gecko/1.9.0.18
Opera10.104742Presto/2.2.15

【対応手順】

ブラウザによって、表示の違いが出ないよう以下の対応する

1.ローカルで html編集 するべく、必要最低限のパーツ用意する(手順はコチラ)
→ TOPページ のソース(TOP.html)
base-cachekey か public-cachekey などのベースとなるCSS
TOP画像(cosmo.jpg)

 
2.IE にて、TOP.html を開いてみる(この時、ソース上で 外部CSS をローカルのものに指定していない)
→ なぜか正常に表示される

 
3.TOPページ のソース に記載されている 外部CSS 指定パスをローカルに落としたものへ変更し、IE にて、TOP.html を開いてみる
→ 同様に正常表示される

 
4.TOP.html に記載されている すべての外部CSS をローカルに落とし、”3”同様に TOP.html 内記載の外部CSS 指定パス変更する
→ 同様に正常表示される
⇒ 以上のことから、HP が表示される前に Plone上 でブラウザに関するなんらかの条件分岐があると推測する

 
5.ZMI上 にある、html系のテンプレート にブラウザ条件分岐の構文が無いかの確認
→ /portal_skins/plone_templates/main_template があやしいと判断する

 
6.条件分岐として以下の行を追加する(“public-IE.css” は IE用 に作った CSS)

<!– Internet Explorer CSS –>
<tal:iefixstart replace=”structure string:&lt;!–[if IE]&gt;” />
<style type=”text/css” media=”all” tal:condition=”exists: portal/public-IE.css”
tal:content=”string:@import url($portal_url/public-IE.css);”>
</style>

<tal:iefixend replace=”structure string:&lt;![endif]–&gt;” />

 → Sleipnir(自宅) だけがずれるようになる

 
7.条件分岐を [if sleipnir] に変更する
→ IE だけがずれるようになる

※この結果は [if sleipnir] が適用されたように見えるが、そもそも、[if sleipnir] という構文はないので認識されず
当初の CSS のみが適用された為、Sleipnir で閲覧した時に正常表示した

 
8.条件分岐を [if lt IE 8] に変更する
→ Opera だけがずれるようになる

 
9.条件分岐を [if lte IE 8] に変更する
→ IE、Sleipnir(会社)、Firefox、Opera 正常に表示される

念の為、条件分岐を [if IE]、[if lt IE 8]、[if lte IE 8] にそれぞれ変え
さらに条件分岐の検証をしてみた

 
以下の内容を html形式 でローカルに保存し、それぞれのブラウザで開いてみる

<html>
<head>
</head>
<body>
<!–[if IE]>
<p><b>IE</b></p>
<![endif]–>
<!–[if IE 8]>
<p><b>IE8</b></p>
<![endif]–>
<!–[if IE 7]>
<p><b>IE7</b></p>
<![endif]–>
</body>
</html>

結果、Firefox と Opera はなにも表示されず、IE と Sleipnir は “IE”、”IE8” が表示された
つまり、IE と Sleipnir は 条件分岐”IE”系 として適用されるよう
(もちろん、Sleipnir の設定にもよると思うが)

→ 条件分岐(コンディショナルコメント)の詳細についてはコチラ

 
【結論】

ブラウザによって、ホームページの表示に違いがあるのは
ブラウザのHTMLレンタリングエンジン にて CSS の解釈を行うので
このエンジンが違えば、表示されるレイアウトも変わってしまうからである

今回は条件分岐にてスタイルシートを追加で読ませることでほぼ問題は解決した
今後はブラウザ側でエンジンの統一か、CSS の解釈を同じにしてほしいと切実に願う(笑)

だが、自宅Sleipnir のみ本事象は改善されなかった
やっぱり、ブラウザ表示には PC解像度 も関係あるのかな?

また、Plone で設定を変えても、ブラウザ閲覧時に反映されないときがたまにあった
これはキャッシュしてるからだと思われるが、Ctrl+F5 更新 でも変わらないことが多々あった

これは、ブラウザによっては Ctrl+F5更新 されないからか?もしくは、Plone上 で設定がキャッシュされており、更新されなかったからか?

タイトルとURLをコピーしました