昨天启动了我的网站——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] 注释中。