博主可以说是前端白痴,但又手痒经常改动主题,今天网友内涵图跟我反应IE8下我的博客出现乱码,当时在上班,没法上博客,就用手机看了下,正常。

回家之后用IETester看了一下,发现不止IE8,IE6和IE7都有问题,当然IE6我不想管他,但IE8都排版错误这个就有点说不过去了,我去看了同样使用loper主题的博客站,发现他们的都没有问题,那么肯定是被我修改出问题了。

乱改主题引发的杯具

我一开始认为是style.css文件改错了,把该文件还原了一下,没解决。又把首页文件index.php还原,也没解决。因为改过的文件太多,一个个的覆盖验证实在太麻烦。还尝试了一下把插件都禁用,也没解决。

然后我就想到了dropbox中的备份,我设置的备份计划是每周全站备份,每天数据库备份。看了下dropbox中的文件,发现最早的是6月23号的,果断拿来覆盖一下,发现还是没解决。无奈之下把主题原文件拿来覆盖了一下,意料之中排版正常,而且IE6都正常。

这样就没办法,只能把文件还原来查找哪个文件出错,为了避免不必要的麻烦,我先把目前的主题文件备份,然后开始用二分的方法找问题文件(先把主题中一半的文件还原,然后从有问题的一半中再分一半还原),大概还原了3-4次终于被我找到罪魁祸首了,就是header.php。

文件虽然找到了,但还是不知道哪行代码出问题,我就又只能一段一段的还原验证。最后惊奇的发现这段代码:

	<!--[if lt IE 9]>
		<script src="<?php bloginfo('template_url');?>/scripts/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

	<!--[if IE 6]>
		<script src="<?php bloginfo('template_url');?>/scripts/DD_belatedPNG.js"></script>
		<script>
		  DD_belatedPNG.fix('ul.menu li.backLava,ul.menu li.backLava div.leftLava,ul.menu li.backLava .bottomLava,.searchbar,.slideshowbg,.thumbnailbg,.post-more,.title,.id-bar,#comments ol li,.warning,.noway ,.buy,.task,.index h1.category,.index h1.archive,.index h1.tags,.index h1.searchicon,.index h1.links,footer,.footertop,#loperlogo')
		</script>
	<![endif]-->

	<!--[if IE]>
		<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url');?>/hack/ie6_8.css" />
	<![endif]-->

	<!--[if IE 9]>
		<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url');?>/hack/ie9.css" />
	<![endif]-->

有点前端知识的人应该明白,这些是用hack IE浏览器的,使IE显示不会出问题,而悲剧的博主当时以为是注释,毫不留情的把这些代码给删了,而且印象中是很久以前的事了。这就导致我的站在IE6-8下一直显示有问题,而本站IE8的PV量排在第二,仅次于Chrome,居然现在才被我发现,真是悲剧,估计那些IE读者看到我的站跳出率都是100%,停留时间也不会很长。

最后,再次感谢内涵图告诉我这个问题,不然我自己几乎不可能知道了。。。