作者：幽幽独舞99 | 来源：互联网 | 2023-12-13 10:50
本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSShacker，使用last-child清除浮动、批量添加标签、去掉listitem最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉listitem最后一个的border-right的方法。
以下内容参考自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 textli>
<li>sample textli>
<li>sample textli>
<li>sample textli>
<li>sample textli>
<li>sample textli>
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>
京公网安备 11010802041100号