WordPress模板制作的错误定位技巧

 Z56中国设计秀

在wordpress模板制作过程中，有一些貌似复杂的问题，其实只要确定了问题出现的位置，大多数都可以自行解决。Z56中国设计秀

1.使用Firebug进行排查Z56中国设计秀

1.1 简要介绍与安装方法Z56中国设计秀

Firebug是Firefox的一款插件，提供了一整套web开发所必需的工具。从HTML的编写，到css样式表的美化调优，以及…Z56中国设计秀
所以我们首先要安装Firefox浏览器。Z56中国设计秀
安装好浏览器后，选择菜单栏上的“工具”菜单，点击“附加组件”==>“获取附加组件”Z56中国设计秀
在输入框中输入“firebug”。等搜索结果出来后点击Firbug链接进入Firebug的下载安装页面。Z56中国设计秀

1.2 使用方法Z56中国设计秀

安装完成后，在自己出错的位置上，点右键==>查看元素，就可以找到出错的样式在什么地方。Z56中国设计秀

2、边框背景调试法Z56中国设计秀

2.1 简要介绍Z56中国设计秀

如果页面在IE下浏览异常，在FF浏览正常，就比较麻烦一点，这时候我们可以给元素设置显眼的边框或者背景，进行调试。Z56中国设计秀

2.2 使用方法Z56中国设计秀

首先估计一下出错的位置在那，在它的标签上加style=”border:1px solid #000″，这样就可以看到该模块占了多少位置，是否在成长的范畴。Z56中国设计秀

3、最大宽度最小宽度Z56中国设计秀

3.1 简要介绍Z56中国设计秀

在模板制作过程中，经常会出现侧边栏下沉的情况，通常都是content区域的宽度过多造成的，但并不绝对是。Z56中国设计秀

3.2 解决方法Z56中国设计秀

遇到这种情况，我们可以先将content的宽度给成100或更小并添加overflow:hidden属性，隐藏掉超出部分。如果宽度改小后，下沉问题解决。就可以判断问题就是出现在这个元素上。之后可以改小margin-left、改小宽度、隐藏超出宽度的图片什么的，一点一点测试，调个完美版本的出来。（之前看到某同事，每次宽度减小10来测试，既然是测试，减小100不是更容易发现问题吗？）Z56中国设计秀

3、样式排除法Z56中国设计秀

有些复杂的页面也许加载了 N 个外链 css 文件，那么逐个删除 css 文件，找到 BUG 触发的具体 css 文件，缩小锁定的范围。Z56中国设计秀
对于刚才锁定的问题 css 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。Z56中国设计秀

4、模块确认法Z56中国设计秀

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。Z56中国设计秀