如下内容参考自segmentfaultcss
要解决ie678的兼容性问题,通常最好少用css3和html5独有的属性,或者作css hacker。last-child通常用于清除浮动、批量添加标签、标签之间的分隔符、去掉list item最后一个的border-right等等。html
用after清除浮动的时候,通常会加个ie独有属性zoom:1来处理兼容性问题。html5
.clearfix::after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .clearfix { clear: both; zoom:1; }
而须要用它批量添加标签时,则能够使用jquery来代替,添加的标签较少时能够手动添加取代。jquery
去掉list item最后一个的border-right能够用负边距:css3
负值之美:负值在页面布局中的应用segmentfault
还有一种方法是使用css2选择器element+element
,
即一个元素紧接着另外一个元素选择器。使用
布局
li+li{border-top: 1px dotted #999;}
这样作到在以下每条记录上加上分隔符,作到不产生最后一个border-right的结果spa
<ul> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> </ul>
若是是非table布局合并边框就直接在边框设定margin -1px便可,使用.net
margin-right: -1px;
margin-bottom: -1px;
合并重复的边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item { float: left; border: 1px solid red; margin-right: -1px; margin-bottom: -1px; width: 158px; height: 180px;; } .wrapper { width: 400px; } </style> </head> <body> <div class="wrapper"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> </body> </html>