WordPress主题折腾的小经验

由 axiu 撰写于 2010/04/13 | 54 条评论

折腾主题的时候,偶尔会碰见这样的事:主题不兼容各种浏览器,写出的样式在浏览器下样子很多变,但基本没型。或者在某个特定的浏览器下严重变形。边栏掉地上了或者某个地方怎么整位置都不是想象中的。解决这些问题会耗费很多时间,所以对于我这样的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页面,以后主题目录和介绍就放里面啦,欢迎参观讨论。

评论:54

  1. A.shun
  2. A.shun 10/04/16

    主题折腾很多情况下就被这些小问题纠结半天

    话说,op也是有私有hack的,-o
    但是用到的情况很少,要么直接支持,要么暂时不支持
    怎么说css之父都是opera公司的CTO嘛,标准还是很看重

  3. aisinvon
  4. aisinvon 10/04/17

    我下午刚折腾了一下午的主题

  5. itopdog
  6. itopdog 10/04/17

    博文很精彩,常来学习

  7. 大脚
  8. 大脚 10/04/18

    恩。。支持。。

  9. 摸了你
  10. 摸了你 10/04/21

    对 本身不难 但是实在很琐碎 很考验耐心和经验

  11. HiTao
  12. HiTao 10/04/21

    还有一些细节。需要细心。

  13. 夏影残雪
  14. 夏影残雪 10/04/24

    用%有好处,但是固定宽的话,可以让排版更统一。方便更换不同主题的时候,文章的排版依然照旧。

  15. 海天无影
  16. 海天无影 10/04/24

    博主的皮肤很好看的说 呵呵~

  17. loo2k
  18. loo2k 10/05/03

    其实,就 FF 最省心。不过这里介绍的经验不仅是 WordPress 主题吧。

    • axiu
    • axiu 10/05/03

      @loo2k 呵呵,经验来自Wordpress主题,但不只适用于Wordpress。

  19. 非主流
  20. 非主流 10/08/20

    不错不错

  21. 图书
  22. 图书 10/10/13

    很有用的一些小经验,谢谢分享

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

:razz:

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

RSS订阅