【現象】
職場の PC から、自分のサイトを見てみたら以下のようになっていた
あれれ？
家では普通に見れるように設定したのに・・・
そこで、職場と自宅のＰＣから異なるブラウザで正常表示の有無を調査しました
IE、Sleipnir、Firefox、Opera と四つのブラウザをそれぞれ試してみると
どうも、IE のみ閲覧時正常表示されないよう
以前レイアウト調整をするときはFirefox からブラウジングして合わせたからだ
【環境】
| PC | browser | version | build | engine |
|---|---|---|---|---|
| 職場-Windows | IE | 8.0 | 6001.18702 | Trident/4.0 |
| Sleipnir | 2.9.3 | 2903400 | Trident/4.0 | |
| Firefox | 3.5.9 | 20100315 | Gecko/1.9.1.9 | |
| Opera | 10.53 | 3374 | Presto/2.5.24 | |
| 職場-Linux | Firefox | 3.0.18 | 2010021718 | Gecko/1.9.0.18 |
| Opera | 10.10 | 4742 | Presto/2.2.15 | |
| 自宅-Windows | IE | 8.0 | 6001.18904 | Trident/4.0 |
| Sleipnir | 2.9.2 | 2902400 | Trident/4.0 | |
| Firefox | 3.6.3 | 20100401 | Gecko/1.9.2.3 | |
| 自宅-Linux | Firefox | 3.0.18 | 2010021718 | Gecko/1.9.0.18 |
| Opera | 10.10 | 4742 | Presto/2.2.15 |
【対応手順】
ブラウザによって、表示の違いが出ないよう以下の対応する
１．ローカルで html編集 するべく、必要最低限のパーツ用意する(手順はコチラ)
→ TOPページ のソース(TOP.html)
base-cachekey か public-cachekey などのベースとなるCSS
TOP画像(cosmo.jpg)
２．IE にて、TOP.html を開いてみる(この時、ソース上で 外部CSS をローカルのものに指定していない)
→ なぜか正常に表示される
３．TOPページ のソース に記載されている 外部CSS 指定パスをローカルに落としたものへ変更し、IE にて、TOP.html を開いてみる
→ 同様に正常表示される
４．TOP.html に記載されている すべての外部CSS をローカルに落とし、”３”同様に TOP.html 内記載の外部CSS 指定パス変更する
→ 同様に正常表示される
⇒ 以上のことから、HP が表示される前に Plone上 でブラウザに関するなんらかの条件分岐があると推測する
５．ZMI上 にある、html系のテンプレート にブラウザ条件分岐の構文が無いかの確認
→ /portal_skins/plone_templates/main_template があやしいと判断する
６．条件分岐として以下の行を追加する(“public-IE.css” は IE用 に作った CSS)
<!– Internet Explorer CSS –>
<tal:iefixstart replace=”structure string:<!–[if IE]>” />
<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:<![endif]–>” />
→ Sleipnir(自宅) だけがずれるようになる
７．条件分岐を [if sleipnir] に変更する
→ IE だけがずれるようになる
※この結果は [if sleipnir] が適用されたように見えるが、そもそも、[if sleipnir] という構文はないので認識されず
当初の CSS のみが適用された為、Sleipnir で閲覧した時に正常表示した
８．条件分岐を [if lt IE 8] に変更する
→ Opera だけがずれるようになる
９．条件分岐を [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上 で設定がキャッシュされており、更新されなかったからか？
