说说我在WordPress 2.7中留言嵌套的样式设计

说说我在WordPress 2.7中留言嵌套的样式设计

分类：WordPress, theme skill | 标签： WordPress,主题,留言,设计 | 浏览次数：3,268

既然Js O3 beta使用了 WordPress 2.7 中原生的留言嵌套功能，我还是应该对其留言的样式好好认真一下。一般我们看到的最常见嵌套样式就是利用回复楼层的缩进以便区分，再套上边框显示。这也是我之前一直觉得嵌套样式在排版混乱的主要原因，所以我不喜欢自己主题也是这样的显示方式。

我想了一下，还是希望嵌套的样式尽量保持一层一层，却又不失与父楼层的联系。因为，其实嵌套的留言样式有一个好处就是能让其它访客知道留言的上下文，不用只看到@XXX的字样。说到这里不得不提一下在Shawn的留言中，利用JS功能把需回复留言的原内容弹出显示。这个功能我也一直想实现，只是还没来得及就给他完成了，呵呵，大家都去看看，很不错的。

言归正传，我对自己的留言样式进行了修改：增加了父子留言之间连线显示，效果就如一些电脑程序中的文件管理显示方式，象下图：

连线的实现在CSS中并不难。对于第一层的连线，需要的只是对.commentlist li.depth-2的样式设置border-top属性，但不设置margin-left，而改为对其设置padding-left实现文字的缩进；当然avatar头像只是简单的margin-left则可以了。

而对于第二层的回复，因为需要增加连线连接第一层回复的头像处，这个我觉得并不好实现。尝试过的方法是利用float属性浮动第二层，然后把留言内容利用margin-top压下，连线则为.commentlist li.depth-3的border-left和border-bottom，但这样根本不行，放弃。

然后想到利用该层中avatar头像的这个DIV进行：现在的方法是利用.commentlist li.depth-3 .avatar（回复二层的头像DIV）的border-left和border-bottom实现连线；然后把.commentlist li.depth-3 .avatar .img这个图片进行float浮动，并利用padding将其设计到需要的位置处；至于每二层回复的顶部连线同第一层连线的设计，通过对.commentlist li.depth-3的border-top属性则可以实现。

在上面的设计方法中，虽然我没有把具体的样式代码写出，但上面的文字解释相信懂得的CSS的各位应该能看得个明白。其实这样的设计目前只能在IE7和FF下实现，失败的地方依然是万恶的IE6，由于用到padding的属性，而padding在IE6的使用总是有这样那样的问题。不信大家可以在IE6下看下效果，一点也不好。

写这篇文章的主要目的其实是想看下大家对这个样式在IE6下的显示问题有没有解决的办法可以告诉一下我，因为我并不想通过IE6的hack代码进行修正，却又被迫放弃W3C的通过，很是茅盾矛盾哦；再者，如果大家有看过一些值得参考的嵌套样式，不妨给我留个地址，让我也多学习学习，谢了。

喜欢本文？不如把它分享到 Twitter 或者收藏到 Delicious。建议通过 RSS 订阅本站更新。你还可以 follow me @jinwen. 谢谢！ — by Jinwen @ 2009/01/21 17:27

34 条评论于 “说说我在WordPress 2.7中留言嵌套的样式设计”

Shawn 回复 09/01/22 02:15 #comment-4178

抢个沙发。

现在的主题很清爽！然后我反馈一个问题： 1024 分辨率下会出现横向滚动条。
- Rowe 09/01/22 02:29 #comment-4180
  
  非宽屏下会有
- Jinwen 09/01/22 08:21 #comment-4185
  
  是IE6下的1024？
- Jinwen 09/01/23 17:11 #comment-4201
  
  改了一下宽度，帮我看看现在横向的滚动条是不是没了？thanks。
- sameasy 10/02/27 12:03 #comment-13041
  
  只是尝试下，请不要回复，谢谢@Jinwen
Betty 回复 09/01/22 02:28 #comment-4179

可以试试ie7.js，一个解决了很多ie6的bug的js库
我写的介绍：http://myfairland.net/make-ie6-normal/
- Jinwen 09/01/22 08:22 #comment-4186
  
  谢谢提供。我正在试，但效果还不能完全修正。
Leeiio 回复 09/01/22 03:30 #comment-4181

我是來找錯別字的，“茅盾”-> 矛盾
- Jinwen 09/01/22 08:23 #comment-4187
  
  就是呢，居然打出来了，我那时就看着怪怪的。可能这几年接触中文太少了，问题看不出个所以来，呵呵。
iColor 回复 09/01/22 05:58 #comment-4183

回复按钮放在那不是浪费了一行吗?放时间后面也可以吧...个人看法...

还没升级 2.7, 先不关注这块内容...
YIMO 回复 09/01/22 07:35 #comment-4184

这种方式蛮好玩的，不错！
welee 回复 09/01/22 09:12 #comment-4188

这篇文章绝对要收藏，因为我现在正为 2.7 的嵌套而烦，这个排版倒是蛮清楚的。
话说，上面那张图片竟然有我耶，哈哈！
underone 回复 09/01/22 13:34 #comment-4191

所以我才抗拒嵌套回复。。。
Zoll 回复 09/01/22 17:20 #comment-4192

喜欢喜欢很想Win的根状目录呀呵呵
onefrozen 回复 09/01/23 04:52 #comment-4198

问个问题

我仿照这个写，怎么老是404呢？
- Jinwen 09/01/23 08:37 #comment-4199
  
  404和样式应该是没有关系的啊？
网名回复 09/01/23 14:27 #comment-4200

感觉你的风格太白了``
天涯行客回复 09/01/24 14:22 #comment-4203

我觉得嵌套评论不如论坛里常用的引用回复（评论）功能，引用回复（评论）功能比嵌套评论更加实用
xiaorsz 回复 09/01/25 04:05 #comment-4204

很有创意的说！！IE6是很让人头疼的！不管他也罢，不过网上应该有很多hack的吧！！
xiaorsz 回复 09/01/25 04:10 #comment-4205

我的留言怎么没见了？
- Jinwen 09/01/25 07:20 #comment-4207
  
  居然给spam了，怎么会呢？
cosbeta 回复 09/01/25 05:21 #comment-4206

cosbeta 给你拜年了，哈哈，祝你新年快乐，春节愉快，万事如意
- Jinwen 09/01/25 07:41 #comment-4208
  
  春节快乐，恭喜发财。。。
tianweier 回复 09/02/03 16:10 #comment-4344

主人回复有点奇怪。。。。
- Jinwen 09/02/03 16:39 #comment-4345
  
  是哪里奇怪呢？我并没有对主人回复设置什么样式的。
X-Force 回复 09/04/28 19:43 #comment-6328

@网名我想试试这个能否嵌套的？
Jinwen 回复 09/04/28 19:51 #comment-6329

@X-Force 现在的这个主题是Ajax提交留言的，没有嵌套；文中介绍的嵌套样式现在是Js Paper主题中体现。而现在你能看到的留言样式有嵌套的设计，但是在Js O3 Lite主题中体现。我把它们分开了，上面的主题如果你希望下载，地址在这里：http://wordpress.org/extend/themes/profile/jinwen
外贸人回复 10/02/04 17:47 #comment-12594

你这样留言背景相间隔是怎么搞的？？
- Jinwen 10/02/04 21:22 #comment-12596
  
  一般主题会在留言样式中添加.thread-alt这样的区分。但要看主题的支持与否，你可以下载一下我的主题看下，或者就明白了。
onefrozen 回复 09/01/22 12:23 #comment-4190

text一下第三层的样式捏。。。
onefrozen 回复 09/01/22 18:45 #comment-4196

两个第三层并列是啥样的呢？
Shawn 回复 09/01/23 01:12 #comment-4197

是 Firefox3 和 1024
Shawn 回复 09/01/23 23:02 #comment-4202

没了！：）