WordPress主题折腾的小经验

折腾主题的时候，偶尔会碰见这样的事：主题不兼容各种浏览器，写出的样式在浏览器下样子很多变，但基本没型。或者在某个特定的浏览器下严重变形。边栏掉地上了或者某个地方怎么整位置都不是想象中的。解决这些问题会耗费很多时间，所以对于我这样的css新手来说，建一个新主题时间基本都花在了css的调试上。以下是一些主题制作的过程的小经验。

1、不经常使用具体的px大小，在元素高度和宽度、各个项目的字体大小设置时用了%。我觉得好处是不用计算内部元素到底要多长多高的px，只要想想占多大比例，坏处是调整的幅度稍微有点大。

2、仔细想想再动手。比如前一个主题，在导航栏下总有一条线，似乎是border，但是怎么改都有。最后整体看了一遍才明白是多嵌套了一个div。删除了一切正常。其实只是走的太进了，我的意思是，总是希望在现有基础上不断改出合适的。但是有时候需要后退一点，例如试着删除继承自的某个项目，也许就会好了。

3、项目对齐。ul里面套li的时候很容易出现某些项目对不齐，即“错位”，多见于IE系列。我的主题出现在IE8下，我的解决办法，用了一个display:block之后就正常显示了。

4、浏览器的兼容问题。这是个经久不变的话题。尤其是对于IE，从刚开始的迷惑到后来的讨厌，之后的麻痹，一直到了现在的包容。不能怪IE什么，一个时代的产物，毕竟是它让我们大部分人走近了网络。但是，该死的时候还是要死的。之外有时候只是我们一些东西写的有点问题，hack是一种很好的解决办法。

firefox和safari（chrome等）下，-moz 只对 Firefox有效, -webkit 只对 Safari 浏览器有效。

IE系列（主要是IE6和IE7）有两种形式的兼容写法。

<!--[if IE 7]> 
<style type="text/css">
......
</style> 
<![endif]--> 
 
!--[if IE 6]> 
<style type="text/css"> 
......
</style> 
![endif]-->

或者

/* IE 7下 */  
{*display: …;} 
 
/* IE 6 下*/ 
{_display:…;}

推荐使用第一种。

5、页面宽度比例。一般主栏和侧边栏的比例不超过3：2。我今天才发现小于的60%和40%看起来舒服多了。边栏过宽显得主次不分明。

最后，新建了一个theme页面，以后主题目录和介绍就放里面啦，欢迎参观讨论。