以下内容参考自segmentfault
要解决ie678的兼容性问题，一般最好少用css3和html5独有的属性，或者做css hacker。last-child一般用于清除浮动、批量添加标签、标签之间的分隔符、去掉list item最后一个的border-right等等。
用after清除浮动的时候，一般会加个ie独有属性zoom:1来处理兼容性问题。
.clearfix::after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .clearfix { clear: both; zoom:1; }而需要用它批量添加标签时，则可以使用jquery来代替，添加的标签较少时可以手动添加取代。
去掉list item最后一个的border-right可以用负边距：
负值之美：负值在页面布局中的应用
CSS布局奇淫巧计之-强大的负边距
还有一种方法是使用css2选择器element+element，即一个元素紧接着另一个元素选择器。使用
li+li{border-top: 1px dotted #999;}这样做到在如下每条记录上加上分隔符，做到不产生最后一个border-right的结果
<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即可,使用
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>
转载于:https://www.cnblogs.com/a5211083/p/6972944.html
