Twenty Twelve采用Responsive Design,浏览器必须支持Media Query才可以看到浏览器版本的菜单,否则会直接看到手机版菜单。而IE8和IE7不支持Media Query,于是只能直接看到移动版菜单。

除了菜单,主题其它部分在IE8和IE7中看起来都很完美,菜单问题也不是什么大问题,如果想修复,可以下载一个js文件,使IE8和IE7也支持Media Query,这样主题在这两个浏览器上看起来也是Responsive的。

下载css3-mediaqueries.js,放在主题的js目录下

打开主题的header.php,修改IE Hack部分的代码,加上这个js文件

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/css3-mediaqueries.js" type="text/javascript"></script>
<![endif]-->

这样菜单在IE8下就不会有任何问题了。只是IE7不支持display:inline-block这个属性,所以要想IE7也没问题,还要给style.css加些样式。

.ie .main-navigation li a,
.ie .main-navigation li {
        display: inline;
}

当然,如果你不想让主题Responsive,可以直接去掉media query的声明,将media query的样式变成正常的样式,并加上上面的css样式,就可以在IE7和IE8中正常查看了。

在style.css的1355行会找到media query代码

@media screen and (min-width: 600px) {

看起来,Twenty Twelve主题的开发者准备将Mobile First的理念贯彻到底了。

关于这个问题,这里有更进一步的讨论

http://core.trac.wordpress.org/ticket/22044

Stanley写了关于如何去掉Twenty Twelve的Responsive特性并使之支持IE低版本浏览器和360浏览器的方法,如果你遇到了“超出安全控制范围”的提示,不妨参考Stanley的文章http://totem.co/3123

8条留言

    1. 我也遇到了“超出安全控制范围”的提示,没有具体研究是什么原因,可以换这个脚本
      https://github.com/scottjehl/Respond

      不过我最后的方案是不让主题在IE下有Responsive的行为,即使装了这些js,支持的media query也很有限,有点鸡肋的感觉,不如干脆固定宽度。Responsive对手机或者平板更有用。

      我博客这个主题是基于twenty twelve的,你可以试试不同设备的观看效果,用这个链接看http://www.responsinator.com/?url=www.solagirl.net

      用IE9以下的浏览器看就是固定宽度。

  1. 按照上面的方法操作了,可是打开每个连接,都会提示超出安全控制范围,问是否访问……
    而且很容易卡死……
    怎么办?

    1. 请说的具体一点。

      你用的测试环境是什么

      做了哪些操作导致不正常的情况出现的?

      超出安全范围或者卡死像是js的问题,很有可能是你的测试环境没配置好,或者浏览器,你用了什么浏览器?

      1. 用xampp的。
        浏览器没改什么配置的,ie8,360,都是这样。

    1. WordPress网站吗?跟服务器配置有关系吧,我没用过nginx的,不过一般服务器都能指定404错误的页面,或者你在wordpress主题里写一个404.php模版,看看管用不,参考一下默认主题的404.php

评论功能已关闭