如何为IE9调试WordPress主题？

My WordPress blog (www.itauthor.com) displays just fine in IE7, IE8, Chrome and Firefox. However, it doesn't display at all in IE9, even if I F12 and change the display modes. Disabling all active WordPress plugins doesn't solve the problem but switching to another theme does - so there's something in my theme that IE9 doesn't like.

我的WordPress博客(www.itauthor.com)在IE7,IE8,Chrome和Firefox中表现得很好。但是,它在IE9中根本不显示,即使我是F12并改变了显示模式。禁用所有活动的WordPress插件并没有解决问题,但切换到另一个主题确实 - 所以我的主题中有一些IE9不喜欢的东西。

However, I really like the theme I'm using, I've been using it for years and I really don't want to have to switch themes (and be faced with hours & hours of PHP tweaking) just because of IE9.

但是,我真的很喜欢我正在使用的主题,我已经使用它多年了,我真的不想因为IE9而需要切换主题(并且面对PHP调整的小时和小时)。

So what's the best way of tracking down what's causing IE9 to blank my site?

那么追踪导致IE9空白我的网站的最佳方法是什么?

4 个解决方案

#1

Try passing your site through a validator to see potential problems.

尝试通过验证器传递您的网站,以查看潜在的问题。

http://validator.w3.org/

There are quite a few issues, it would be best to make sure that your markup matches your doctype. You should also remove any white spaces before the doctype declaration (there are 3 blank lines)

有很多问题,最好确保您的标记与您的doctype相匹配。您还应该在doctype声明之前删除任何空格(有3个空行)

As your doctype is XHTML, you have to close your tags properly. The three css link tags on top is not closed, change them to:

由于您的doctype是XHTML,因此您必须正确关闭代码。顶部的三个css链接标记未关闭,请将其更改为:

    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/blueprint-wp.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/print.css" type="text/css" media="print" />

You're also closing some paragraph tags where they're not open. Just work your way through the issues on the validator page.

您还要关闭一些不打开的段落标记。只需在验证器页面上解决问题。

Despite all problems, I have a fresh installation of IE9 with default settings, and your page renders just fine. If you have any IE add-ons installed, make sure you run IE9 without addons using the shortcut in the start menu and test again.

尽管存在所有问题,我还是使用默认设置重新安装了IE9,并且您的页面渲染得很好。如果您安装了任何IE加载项,请确保使用开始菜单中的快捷方式运行没有插件的IE9并再次测试。

#2

You may try:

你可以尝试:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

as a workaround until the problem is solved.

作为一种解决方法,直到问题解决。

#3

Problem solved:

I eventually discovered the answer to blank pages in IE9 - or pages not displayed correctly for some sites. It's a known bug in IE9. It doesn't like Helvetica. This bug only manifests itself if you actually have Helvetica installed which is why most people don't encounter the problem, but if you do have Helvetica installed and you browse to a site like validator.w3.org that (at the time of writing) uses this font, then part or all of the page won't show up in IE9.

我最终发现了IE9中空白页面的答案 - 或者某些网站没有正确显示的页面。这是IE9中的已知错误。它不喜欢Helvetica。如果你真的安装了Helvetica这就是大多数人没有遇到问题的原因,但是如果你确实安装了Helvetica并且浏览了像validator.w3.org那样的网站(在撰写本文时)使用此字体,然后部分或全部页面将不会显示在IE9中。

The solution for visiting other people's sites (a drastic one) is to uninstall Helvetica on your computer, then IE9 will just use the next installed font listed in the page's CSS.

访问其他人的站点(一个激烈的站点)的解决方案是在您的计算机上卸载Helvetica,然后IE9将使用页面的CSS中列出的下一个安装的字体。

If you're a web site owner and you want to fix your site for other people, the solution is to remove Helvetica from your site's stylesheets.

如果您是网站所有者并且想要为其他人修复您的网站,解决方案是从您网站的样式表中删除Helvetica。

I find it amazing that months after this bug has been known about Microsoft still haven't got round to fixing it.

在发现这个bug之后的几个月,微软仍然没有完全修复它,我觉得很奇怪。

#4

<!--[if (gt IE 9)|!(IE)]><!-->   
    <script src="http://livedemo00.template-help.com/wordpress_45311/wp-content/themes/CherryFramework/js/jquery.mobile.customized.min.js" type="text/javascript">    </script>    
    <script type="text/javascript">    
        jQuery(function(){    
            jQuery('.sf-menu').mobileMenu({defaultText: "Navigate to..."});    
        });    
    </script>    
    <!--<![endif]-->

#1