网址： http://lovexiao923.coding.me/...

兼容ie8,9求方法。

发布于
2017-09-20

更新于
2017-09-20

✓ 已被采纳

你这用的都是不兼容ie8的属性background-size transform
你还怎么兼容啊，要全部推翻重做啊！！！
1、导航思路：

 <style>
        *{margin: 0; padding: 0}
        .nav-text{
            width: 1300px;
            height: 60px;
            background-color: #ccc;
            border-radius: 10px;
            margin:40px auto;
        }
        .nav-text li{
            position: relative;
            display: inline-block;
            list-style: none;
            color : #688499;
            height: 60px;
            line-height: 60px;
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            padding: 0 30px
        }
        .nav-text li a{   position: relative;color: black; text-decoration: none;display: block; text-align: center;}

        .nav-text li:hover a,  .nav-text li.this a{
            background: url(https://i.loli.net/2017/09/20/59c1de273ea41.png) no-repeat  center center;
        }

        .nav-text li:hover:before,  .nav-text li.this:before{
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            background: url(https://i.loli.net/2017/09/20/59c1de273dad7.png) no-repeat left center;
        }
        .nav-text li:hover:after,  .nav-text li.this:after{
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            background: url(https://i.loli.net/2017/09/20/59c1de273ebe7.png) no-repeat right center;
        }
        .nav-text li:hover a,  .nav-text li.this a{ color:#fff;}
    </style>
 <ul class="nav-text">
    <li><a href="#" class="">首页</a></li>
    <li><a href="#" class="">关于我们</a></li>
    <li class="this"><a href="#" >瓦楞纸板生产线</a></li>
    <li><a href="#" class="">单瓦纸板生产线</a></li>
    <li><a href="#" class="">硬纸板生产线</a></li>
    <li><a href="#" class="">印刷模切设备</a></li>
    <li><a href="#" class="">纸箱成型设备</a></li>
</ul>

2、这个网站很多轮播图