3

私のウェブサイトhttp://www.artsbrand.co.ukを昨日、IE で完成品をテストせずに立ち上げました。これで、最初は完全にスタイルが設定されていない html が表示され、数秒後に画面が空白になります。その場合、これがソース内の唯一のものです。

<script defer onreadystatechange='google.loader.domReady()' src=//:></script>

これは Google カスタム検索エンジンと関係がありますか?

条件付きのコメントがいくつかありますが、重要な場合に備えて以下にリストします。

  1. まず、html クラスをセットアップします (no-js クラスは Modernizr 用です)。

    <!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!-->    <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!-->    <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!-->    <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->

  2. 次に、メディア クエリを使用して 3 つの異なるスタイルシートを設定します。

    <!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />

  3. これはスティッキー フッター専用です ( http://www.cssstickyfooter.com/style.cssの手順に従ってください):

    <!--[if !IE 7]><!-->
<style type="text/css">
  #wrap {display:table;height:100%}
</style>
<!--<![endif]-->

私は IE7 と IE9 にしかアクセスできませんが、動作はどちらもまったく同じです。1 ～ 2 秒のスタイル設定されていないページ (IE9 で 1 秒の CSS を見たことがあります!) に続いて、完全な空白が続きます。皆さんが提供できるどんな助けにもとても感謝しています!

編集-条件付きコメントと関係があるとは確信が持てません-すべてのコメントを削除しようとしただけで、まったく違いはありませんでした。また、Google CSE の両方のバージョン (Search Element V1 と Search Element V2) を試しましたが、結果は同じでした。

更新 -かなり面倒な回避策がありますが、今のところ IE で検索を停止する必要があります。問題は、メディア クエリ/条件付きコメントの私の危険な使用 (私はどちらも初めてです!) と、IE が Google CSE にひどく反応する原因となっているまだ知られていない問題の組み合わせでした。とにかく、スタイルシートのリンクは次のようになります。

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->

一方、検索スクリプトは [if !IE] コメントで囲まれています。

4

1 に答える 1

1

現在、IE7 マシンを起動できないため、これは単なる推測ですが、スクリプトが終了headタグの前にあることが原因である可能性があります。

私が覚えている限りでは、まだ完全に解析されていないページ上の要素にアクセスしようとすると、IE はおかしな動作をします。

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);基本的に、未完成の head タグ内にあるscript最初のタグの前に新しいタグを挿入しようとしています。script

この場合は(または) にs.parentNodeなると思いましたが、どうやらそれは別のもので、おそらくドキュメント全体でしょうか? 誰が知っている、IE はクレイジーなことをします。nullundefined

いずれにせよ、Google スクリプト タグをbodyページ内ではなく内に移動しheadて、違いが生じるかどうかを確認します。

CSSに関しては、9より前のIEはメディアクエリをサポートしていません。Respondjsのようなものを使用して IE で機能させることができますが、linkタグ自体ではなく、CSS ファイルにクエリを配置する必要があります。

于 2012-10-31T20:26:47.787 に答える