body{ font-size:75%; background:#abc; } ol,ul{ list-style:none; } *{ margin:0; padding:0; } /*-------------------------------------------------------------------- Comments Section --------------------------------------------------------------------*/ div#comments{ width:50em; clear:both; margin:2em; background:#EDEDED; border:1px solid #ddd; padding:1em; } /*-------------------------------------------------------------------- Comment Trees Layout --------------------------------------------------------------------*/ ul#comment_tree{ margin:2.5em 0 1.5em 0; } ul#comment_tree li{ margin-bottom:3em; /*设成和ul.replies的话会比较难识别，亲和力？*/ } /*-------------------------------------------------------------------- Member Picture Layout --------------------------------------------------------------------*/ ul#comment_tree div.member{ width:85px; max-width:85px; float:left; background:#EDEDED; display:block; padding-right:35px; /*为箭头图片留空*/ z-index:1000; } ul#comment_tree div.member img.user_photo{ display:block; } /*-------------------------------------------------------------------- Comments Box Layout --------------------------------------------------------------------*/ ul#comment_tree div.comment{ width:448px; /*或者auto?*/ background:#fff; float:left; position:relative; padding:1.0em 15px; border: 1px solid #ddd; } ul#comment_tree h6.comment_date{ position:absolute; left:-32px; line-height:32px; height:32px; color:#ccc; background:url(image/comment_arrow_bg.png) no-repeat left top; padding-left:4em; font-size:smaller; font-weight:normal; } /*-------------------------------------------------------------------- Comments Content Copy Layout --------------------------------------------------------------------*/ div.comment div.comment_content { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; margin-top: 6em; z-index:999; } /*-------------------------------------------------------------------- Reply Comment Layout --------------------------------------------------------------------*/ ul#comment_tree li ul.replies{ border-left:1px solid #ddd; margin-left:120px; padding-top:1em; } ul#comment_tree li ul.replies * ul.replies{ /*:KLUDGE: "*"指的是将所有ul.replies下的ul.replies, 这种方法替代了子选择器方法，从而可令IE6以下版本也可支持*/ margin-left:24px; border-left:1px solid #ddd; padding-top:1em; } ul#comment_tree li.reply{ background:url(image/comment_li_bg.gif) no-repeat left 2.5em; padding-left:24px; } ul#comment_tree li.reply div.comment_wrapper{ /*comment外套，下一级是.member和.comment*/ position:relative; } ul#comment_tree li.reply div.member{ /*继承了第一个.member中的z-index，其作用是把用户头像置于 comment上方*/ position:absolute; left:1.25em; width:45px; top:1.25em; padding-right:0; } ul#comment_tree li.reply div.member img.user_photo{ width:45px; height:45px; } ul#comment_tree li ul.replies h6.comment_date{ background:none; left:70px; top:32px; padding-left:0; } ul#comment_tree li ul.replies li div.comment{ width:auto; max-width:445px; float:none; padding-top:4em; } /*-------------------------------------------------------------------- Clean Floating Tag --------------------------------------------------------------------*/ .clearfix:after{ content:"."; clear:both; height:0; display:block; visibility:hidden; } .clearfix{ display:inline-block; /*fix IE-Mac*/ } /* Hides from IE-Mac\*/ * html .clearfix{ height:1%;} /*fix IE6*/ .clearfix{ display:block;} /*reset display on IE*/ /*End hides from IE-Mac */