IE8で背景が表示されなくなっているのを発見しました。<b:skin>～</b:skin>を入れ換えるとIE8でも背景が表示されました。でもすぐに戻ってしまいます。
IE8だけ透け透けのページになってしまう
IE8でもページをロードしたときはこうやってちゃんと見えています。
ところがそのまま見ていると、、、外側の背景から順番に消えていき、、、
こんなふうになってしまいます。すごく字が読みにくいです。
fleXcrollのスクロールバーが表示されてから背景が消えるのでfleXcrollが原因かと思いましたがSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で濡れ衣とわかりました。
消えているのは「背景」ということがわかったので「IE8 背景 消える」で検索するとまさに同じ問題をあつかったページを見つけました。
結局テンプレートHTMLのバックアップを使って原因を追求するはめに
IE背景消え対策 | modx＠GSFに同じ症状の原因と対策が書いてありました。
floatを使うとIE8では背景が一瞬表示されてから消えるようです。
テンプレートHTMLを検索してみると投稿記事前後にいれているAdsenseの横の「PR」の表示とBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で導入したページ番号付ページナビのCSSの中にfloatがありました。
これらを削ってみましたが解決せず、、、
そこで先のページの元をさらにたどって読んでみると
IE6の場合、ネガティブマージン（マイナス値の margin）を使うと時々変な挙動をすることがあります。そのひとつとして背景が表示されない、というものがあります。IE6の問題と書いていますがIE8でも当てはまるのかもしれません。
IE6で背景が表示されない際にチェックすること | CSS-EBLOG
Blogger:こまごま変更(2)過去の記事一覧へのページ内ジャンプを作るでまさにネガティブマージンを使っています。
これを削除してみます、、、解決しません。
やはり素直にテンプレートHTMLのバックアップをさかのぼって、どの段階からおかしくなったのか地道に探すことにしました。
そうすると5月9日のテンプレートではIE8の表示は問題なく、5月14日のテンプレートではIE8の背景が表示されないことがわかりました。
まめにバックアップを取っていなかったのでその間に何をしたのかはわかりません。
このブログの日付ではBlogger：リンクのコピー(2)Make Link:%tiltle%には何が入る？からBlogger：更新履歴(3)既に公開した投稿の修正をするとパーマリンクが変わってしまう？までということになります。
ひととおり記事を読んでみましたが原因は思いつきませんでしたのでIE8の表示がおかしくなった5月14日のテンプレートをレイアウト画面でざくざく削ってみました。
原因は<b:skin>～</b:skin>の部分にあった
ここまで削ってもIE8の背景が消えてしまいます。
こんどは、テンプレート→カスタマイズ、でテンプレートデザイナーでカスタマイズした部分を全て削除しました。
これでも解決せず。
さらにテンプレートHTMLをみて]]></b:skin>の上にあるカスタマイズ部分、、、といってもBlogger：見出し設定(5)どのHタグの見出しを変更するか？で作成したh3とh4だけですが、これも削除しました。
それでもダメです。
もうだめか、と思いましたがやけくそで、5月9日の<b:skin>～</b:skin>の部分を丸ごと5月14日のテンプレートにコピペしてテンプレートを保存してIE8でみてみました。
するとちゃんと表示されました。
<b:skin>～</b:skin>の原因部分を探す
5月9日の<b:skin>～</b:skin>と5月14日の<b:skin>～</b:skin>をMergely - Diff online, merge documentsで比較してみました。
あら？全然違うじゃないですか。
左がIE8の背景が消えるskin、右がIE8の背景がちゃんと表示されるskinです。
デフォルトテンプレートは一貫してPicture Windowを使っています。
途中で仕様が変わったのですかね。自分でこんなにデフォルトテンプレートの冒頭から書き換えた記憶が全くありません。
こころあたりは途中でBloggerのテンプレートHTMLの編集画面の操作が大幅に変わったことですね。
これに合わせてテンプレートも変更されたのかもしれません。
しかし右の古いテンプレートでもちゃんと動きます。IE8では右の古いほうがちゃんと動くんですよね。
これまた答えが遠のいてしまいました。
こんなに違う部分が多いとどこが原因なのか突き止めるのは大変です。
IE8では具体的になにが消えているのかChromeの「要素の検証」で探す
ちょっとアプローチを変えてみました。
Chromeの要素の検証を使ってなにが消えているのか具体的に探してみます。
外枠の背景を表示させているCSSがわかりました。
.main-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
このwhite80.pngが繰り返して並べられているようです。
各投稿の背景は.post-outerにありました。
.post-outer {
background-color: #ffffff;
いずれも5月9日と5月14日で違いはありませんでした。IE8の背景が消えるテンプレートがどこからでてきたのか？
このブログのIE8の表示がおかしなテンプレートHTMLと、SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で最近作ったばかりのIE8の表示が問題のないブログのテンプレートHTMLを比較してみました。
するとこれの<b:skin>～</b:skin>は5月9日のものと同じです。
これはどういうことでしょう？
このブログで使っている5月14日以来のIE8で背景が消える<b:skin>～</b:skin>は、新しく作ったブログとは異なっています。
現在新しく作ったブログの<b:skin>～</b:skin>は5月9日と同じです。
うーん、だんだんとわけがわからなくなってきました。
これ以上原因を追究しても埒が明かさなそうなので<b:skin>～</b:skin>部分を入れ換えへ
もうよくわからないので現在使っているテンプレートの<b:skin>～</b:skin>部分を入れ換えてしまうことにしました。
入れ換えるのはデフォルトテンプレートの部分だけです。
この部分でカスタマイズしたのはBlogger：見出し設定(6)Hタグ編集の記録でテンプレートデザイナーを使った以下の部分です。
「ブログのタイトル」でタイトルフォントをROCK SALT。
「投稿タイトル」を24px。
まずはテストブログで入れ換えてみました。
テンプレートを保存したあとIE8でみてみるとちゃんと背景が表示されています。
最初に角が丸くない外側の背景が表示された後、画面がちょっと瞬いて角が丸い背景が表示されます。
Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips
これを見るとIE7互換モードだと角のカーブが無効になるようです。
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>このブログのテンプレートではこの項目は見つけることができませんでした。
しかし、最初はIE7互換モードで表示されその後IE8の表示に入れ替わっているような感じです。
入れ換え前後のCSSの違い
外側の背景のCSS。IE8で消える背景。
.main-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
-moz-border-radius: 20px 20px 0 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
外側の背景のCSS。IE8で描画される背景.main-outer {
background: $(main.background);
-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-webkit-border-top-left-radius: $(main.border.radius.top);
-webkit-border-top-right-radius: $(main.border.radius.top);
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}
投稿文の背景のCSS。IE8で消える背景。.post-outer {
background-color: #ffffff;
border: solid 1px #dddddd;
-moz-border-
radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-goog-ms-border-radius: 5px;
padding: 15px 20px;
margin: 0 -20px 20px;
}
投稿文の背景のCSS。IE8で描画される背景.post-outer {
background-color: $(post.background.color);
border: solid 1px $(post.border.color);
-moz-border-radius: $(post.border.radius);
-webkit-border-radius: $(post.border.radius);
border-radius: $(post.border.radius);
-goog-ms-border-radius: $(post.border.radius);
padding: 15px 20px;
margin: 0 $(post.margin.sides) 20px;
}
IE8で消える背景は直接設定値が記入されているのに対して、IE8で描画される背景は$（名前)で数値が代入されていますね。IE8では再描画するのにこの$（名前)が重要なのでしょうか。
テンプレート編集画面を閉じると入れ換えた<b:skin>～</b:skin>が戻ってしまう
テンプレートを保存後、他の画面に移動後また戻ってくるとIE8の背景が消えるテンプレートに書き換えられてしまってまたIE8の背景が表示されなくなっています。
他のテンプレートの部分を比較してみましたが違いがわかりませんでした。
参考にしたサイト
IE背景消え対策 | modx＠GSF
まったく同じ症状の例が取り上げられていました。
IE6で背景が表示されない際にチェックすること | CSS-EBLOG
このブログの場合はこれらが原因ではないようでした。
IE8と透過pngとJavascriptで泣いた話 ｜ くろひつじのメモ帳
これが原因かと思いましたがちゃんと表示されるテンプレートでも同じpngを使っていました。
便利！Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」 | Cappee Design
テキスト比較ツールMergelyの紹介
Mergely - Diff online, merge documents
テキスト比較ツール。使い方は左右にコピペするだけ。
Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips
IE7互換モードだと枠線の角のカーブが無効になるようです。
0 件のコメント:
コメントを投稿