SyntaxHighlighterにfleXcroll(6)またIE8の表示だけがおかしい

前の関連記事：SyntaxHighlighterにfleXcroll(5)どうあがいてもwindowがloadされる前に表示することは無理そう

久しぶりにIE8を使ってみるとSyntaxHighlighterの横スクロールバーが表示されず、行の終わりまでページ幅が延びて表示されています。

IE8でdiv.syntaxhighlighterに$(window).loadでheightが設定されるようになっていた

もういたちごっこになっています。

もうこの記事は単なる私のためのバグフィックスメモになっているので読んでもらう価値はないと思います。


またIE8でflexcrollを使ったSyntaxHighlighter部分の表示がおかしくなっています。

横スクロールバーが表示されずに右側にはみ出ています。

これまでの経過を振り返ってみます。

Blogger:SyntaxHighlighter(6)オートローダーを使う場合と使わない場合の表示速度の比較で表示速度の改善のためにSyntaxhighlighterのオートローダーの使用をやめました。

するとSyntaxHighlighterにfleXcroll(4)IEだけ$(window).loadのタイミングが違うらしいでやったようにIE8とIE10では$(window).loadのタイミングが合わず、flexcrollの適用前にdiv.flexcroll_heightのclassがつけてあるSyntaxhighlighterのdivにheightの設定ができません。

heightを設定をしてからdiv.flexcroll_heightにdiv.flexcrollとするようにしてあるのでheightが設定されないIE8とIE10にはflexcrollが適用されないはずです。

flexcrollのためにoverflow: visibleにしているので、flexcrollが適用されていないIE8とIE10の場合は横スクロールバーが表示されないことになります。

その対策としてBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するで以下のようにCSSを変更しました。

.flexcroll_height{
 overflow: visible !important;
}

これを以下にするとheightが設定されたdiv.syntaxhighlighterにのみoverflow: visibleが適用されるはずです。

.flexcroll {
 overflow: visible !important;
}

今回横スクロールバーが表示されていないのはこのあたりに問題がありそうです。

ちゃんとブログで記録を残してあるので過去の経過を振り返るだけで問題の部位のあたりをつけれますね。

さあ、あたりをつかたところが正解なのかどうかが問題です。

IE8のメニューでツール→開発者ツール。

右上の検索語に「flexcroll」を入力してEnter。

何回か右矢印ボタンをクリックしてsyntaxhighlighterのclassのdivにたどり着きます。

おお、flexcrollのclassがついてheightが設定されています。

<div class="syntaxhighlighter flexcroll_height xml ie flexcroll" id="highlighter_932058" style="height: 61px;">

IE8の開発者ツールでこの部分のチェックをはずすとちゃんとスクロールバーが表示されました。


これが原因ですな。

flexcrollのclassがついていますがflexcrollが適用されていません。

適用された場合はflexcrollactiveのclassがついているはずです。

IE10では以前と変わっておらずflexcrollのclassはなくheightも設定されていません。

<div class="syntaxhighlighter flexcroll_height xml ie" id="highlighter_686750">

ということで対策としては先ほどのcssのセレクタを.flexcrollから.flexcrollactiveに変更します。

.flexcroll {
 overflow: visible !important;
}

を以下に変更。

.flexcrollactive {
 overflow: visible !important;
}

最初からこうしとけばよかったです。

Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するでCSSを圧縮しているので該当箇所を探すのが大変です。

と思ったらメモ帳に抜き出してoverflowで検索したらすぐに見つかりました。

.flexcroll,.syntaxhighlighter.collapsed{overflow:visible!important;}

ここです。同じプロパティのセレクタはまとめられているようです。

これを以下に変更しました。

.flexcrollactive,.syntaxhighlighter.collapsed{overflow:visible!important;}

無事IE8の表示が直りました。

前回から今回気がつくまでに行ったテンプレートの変更で原因になりそうな心当たりは二つあります。

①忍者おまとめボタンを撤去したので、Blogger:[忍者おまとめボタン]「お気に入りに登録」ボタンの表示を対応ブラウザのみに限定するのコードを撤去したこと。

②Blogger:SyntaxHighlighter(8)jQuery用のBrushを導入でJavaScriptのBrushをこのページだけでロードするようにして、SyntaxhighlighterやflexcrollなどそれまでHTMLの最後にあったスクリプトをすべてHeaderのしたに持ってきたこと。

どちらも$(window).loadの実行タイミングに影響しそうです。

ただしIE8以外のブラウザには影響ありませんでした。