启动我的网站 – http://www.artsbrand.co.uk – 昨天没有在 IE 上测试成品。现在我有了，它最初会显示完全没有样式的 html，然后几秒钟后屏幕就会变成空白。当发生这种情况时，这是源代码中唯一的东西:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
这与我的 Google 自定义搜索引擎有关吗？
我有一些有条件的评论，如果它们很重要，我将在下面列出:
首先我设置了 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]-->然后我使用媒体查询设置了三个不同的样式表:
<!--[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" />这只用于粘性页脚(按照此处的说明 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 中看到过一瞬间的 CSS!)，然后是完全空白。如果你们能提供任何帮助，我将不胜感激!
编辑 - 我现在不太相信它与条件注释有任何关系 - 我只是尝试摆脱所有这些并且它根本没有任何区别。我可能还应该提到，我已经尝试了两个版本的 Google CSE(Search Element V1 和 Search Element V2)，结果是一样的。
更新 - 我现在有一个相当困惑的解决方法，尽管现在必须在 IE 中停止搜索。问题是我对媒体查询/条件评论的狡猾使用(我对它们都是新手!)和导致 IE 对 Google CSE react 不佳的仍然未知问题的组合。所以无论如何，这是我的样式表链接现在的样子:
<!--[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] 注释中。
最佳答案
这只是一个猜测，因为我现在无法让我的 IE7 机器启动，但我认为这可能是因为您拥有的脚本位于结束 head 标记之前。
据我所知，当您尝试访问页面上尚未完全解析的元素时，IE 会做出奇怪的事情。
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 本质上是试图在第一个 script 标签之前插入新的 script 标签，这是在未完成的头标签。
我认为 s.parentNode 在这种情况下会是 null(或 undefined)，但显然它是别的东西，也许是整个文档？谁知道呢，IE 做了一些疯狂的事情。
无论如何，我要尝试的是将 google script 标记移到页面的 body 中，而不是移到 head 中，然后看看是否可以有区别。
关于CSS，IE 9之前不支持media queries .你可以使用类似 respondjs 的东西使其在 IE 中工作，但您需要将查询放在 CSS 文件中，而不是 link 标记本身。
关于javascript - 为什么我的网站在 IE 中是空白屏幕？ (包括 IE9!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12028652/