脚本巴巴 www.jiaoben88.com

IE678解决伪类last-child不兼容问题

发布时间:2017-06-09 22:37:08编辑:脚本巴巴

要解决ie678的兼容性问题,一般最好少用css3和html5独有的属性,或者做css hacker。last-child一般用于清除浮动、批量添加标签、标签之间的分隔符、去掉list item最后一个的border-right等等。

用last-child清除浮动的时候,一般会加个ie独有属性zoom:1来处理兼容性问题。

.clearfix::after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: "";
}
.clearfix {
    clear: both;
    zoom:1;
}

而需要用它批量添加标签时,则可以使用jquery来代替,添加的标签较少时可以手动添加取代。

去掉list item最后一个的border-right可以用负边距:

还有一种方法是使用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>
上一篇:chrome浏览器tab页内存占用变大网站变慢的解决方法
下一篇:Angularjs在360兼容模式下取数据缓存问题解决办法

相关文章