Question

昨天推出了我的网站 - 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" />

这个仅适用于Sticky Footer（根据此处的说明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（搜索元素V1和搜索元素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]注释中。

Answer 1

这只是一个猜测，因为我现在无法启动IE7计算机，但我认为这可能是因为您拥有的脚本位于结束head标记之前。

从我记忆中，当你尝试访问尚未完全解析的页面上的元素时，IE会做一些奇怪的事情。

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);基本上是尝试在第一个script标记之前插入新的script标记，该标记位于未完成的标题内。

在这种情况下，我认为s.parentNode会null（或undefined），但显然这是其他内容，也许是整篇文档？谁知道，IE做了疯狂的事情。

无论如何，我要尝试的是将google脚本标记移到您网页的body内，而不是head中，并查看是否会产生影响。

对于CSS，9之前的IE不支持media queries。您可以使用类似respondjs的内容使其在IE中运行，但您需要将查询放在CSS文件中，而不是放在link标记本身。

为什么我的网站在IE中是空白屏幕？（包括IE9！）

1 个答案:

为什么我的网站在IE中是空白屏幕？ （包括IE9！）

1 个答案:

为什么我的网站在IE中是空白屏幕？（包括IE9！）