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. 然后我用媒体查询设置了三个不同的样式表：

    <!--[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. 这仅适用于 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] 注释中。

4

1 回答 1

1

This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.

From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.

I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.

At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.

As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.

于 2012-10-31T20:26:47.787 回答