IE678解决伪类不兼容问题

以下内容参考自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>

 

 

posted @ 2017-06-09 17:57  a5211083  阅读(1105)  评论(2)  编辑  收藏  举报