Wordpress网站GreenGaint主题破坏网页布局的隐形杀手

作者: 来源: 更新时间:2011-10-27 08:46:26 点击:
网页制作Webjx文章简介:破坏网页布局的两个隐形杀手.

在创建GreenGaint主题的过程中,有两个网页布局上的问题让我头疼了很长时间,一直没有找出到底是哪里出了问题,但之后却在偶然的情况下将这两个问题解决了。这篇文章里我就将这两个破坏网页布局的隐形杀手总结一下,作为经验教训,供大家借鉴。先让我来说说第一个问题。

一、谨慎使用wp_head()语句

发现第一个问题的起因是我在<body>标签下创建了一个<div id=”wrapper”></div>容器,将页面中的全部内容都放到了这个容器之内,但是创建完主题之后却发现wrapper容器的顶部距离<body>标签,也就是浏览器顶部有大概25个像素。为了确认这个间隙的存在,我给<body>标签和wrapper容器添加上了1个像素的border属性,发现确实存在这个问题。然后我又仔细检查了CSS代码,看看是不是手误给wrapper容器添加了margin-top属性,发现代码一切正常,这就让人纳闷了,到底是哪里出了问题呢?

前一段时间准备更新GreenGaint主题,在整理完head.php文件页首的<meta>和<Link>等标签后,查看页面源代码时,突然发现在<head>标签内出现了几行多余出来的代码,仔细一看,其中还有<style>标签,并且还有各种内边距外边距属性,这我就明白了,为什么wrapper的顶部会无缘无故空出几十个像素来了。原来是这里的<style>标签在作怪。但是这些代码并非我写上去的,怎么会出现在<head>标签内呢?经过认真一行一行和head.php文件中代码的比对,发现有这么一句<?php wp_head() ?>很可疑,不知道是干嘛用的。搜索查完资料后才知道wp_head()是wordpress的一个非常重要的函数,基本上所有的主题在header.php这个文件里都会使用到这个函数,而且很多插件为了在header上加点东西也会用到wp_head(),比如SEO的相关插件。但是,在wp_head()出现的这个位置,会增加很多并不常用的代码。这就解释了为什么在<head>标签内会出现<style>标签和wrapper容器的顶部会出现间隙的原因,果然删除了这句代码后,页面显示正常了。这里需要说明的是,直接将wp_head()函数删除可能会影响到某些插件的正常使用,所以如果你既不想让这句代码影响页面布局,又不想影响插件的使用,可以搜索查询一下如何安全的删除wp_head()代码的方法。

二、确保wordpress主题各文件的编码一致

另外一个奇怪的问题就是侧边栏下沉的问题,创建好GreenGaint主题之后,在测试主题在浏览器的兼容性上,我发现侧边栏在IE和Firefox中都很正常,唯独在Safari浏览器中,侧边栏向下下沉了几十个像素,顶部和内容区部分无法保持在同一水平线上。检查了代码后没有发现任何问题,这让我百思不其解。很长一段时间这个问题就被搁置了,还是在最近更新GreenGaint主题的时候,我突然想到会不会是文件编码导致了这个问题呢?用EditPlus打开sidebar.php文件后,发现编码为UTF-8+BOM,而其它文件也是这个编码。虽然我并不清楚这个编码是什么意思,我还是把sidebar.php和其它主题文件另存为了UTF-8格式,这之后再用Safari测试后发现一切正常,又一个诡异而让人头疼的问题解决了。