老师问2个问题

问题1：

未加载使用json文件前，index.html里面的购物车代码预览效果如下：

但加载了json文件替换了购物车cart.html()里面的内容以后 css属性有些不生效了，如位置属性 overfllow:auto 等这些属性样式都消失了，排版都跑位了。（这里js遍历加载的json数据和html格式和上边的是一样的）如图：

问题2：

在鼠标移入移出购物车图标的时候也就是红色和白色背景变换的时候会有一个不能完全填充全部红色背景色余留出了白色的边框是怎么回事。如图：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
            <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
            <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
        </ul>
        <ul class="fr">
            <li class="menu dropdown fl"  data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link  transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                </ul>
            </li>
            <li class="menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                    <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                </ul>
            </li>
            <li class="fl">
                <a href="###" target="_blank" class="nav-site-category link">商品分类</a>
            </li>
            <li class="menu dropdown fl" data-active="menu" data-load="./js/dropdown-seller.json">
                <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></li>
                   <!--  <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
                </ul>
            </li>
            <li class="nav-site-service menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-right">
                    <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                    <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- 站点导航结束 -->
 
 <!-- header区开始 -->
    <div class="header">
        <div class="container">
            <h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
            <div id="header-search" class="search fl">
                <form action="https://s.taobao.com/search"  class="search-form">
                    <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
                    <input type="submit" value="搜索" class="search-btn fl" />
                </form>
                <ul class="search-layer">
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                </ul>
            </div>
            <div class="cart fr" id="cart" data-load="./js/cart.json">
                <a href="###" class="dropdown-toggle cart-title cart-link transition">
                    <span class="cart-icon"><i class="icon">&#xe614;</i></span>
                    <span class="cart-icon"><i class="icon">购物车</i></span>
                    <span class="cart-icon"><i class="icon">|</i></span>
                    <span class="cart-icon"><i class="icon">0</i></span>
                    <span class="cart-icon"><i class="icon dropdown-arrow">&#xe638;</i></span>
                </a>
                    <ul class="dropdown-layer cart-layer" data-active="cart">
                        <!-- <li class="cart-loading"></li> -->

                        <li class="dropdown-layer cart-layer-item" data-load="./img/cart/1.png"></li>
                        
                        <li class="cart-layer-item-title">最新加入商品</li>
                        <ul class="cart-layer-text">
                        <li class="cart-layer-item"> 
                            <table>
                                <tr>
                                    <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                    <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                    <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                </tr>
                                <tr>
                                    <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                </tr>
                            </table>
                            </li>
                                   <li class="cart-layer-item"> 
                                    <table>
                                        <tr>
                                            <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                            <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                            <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                        </tr>
                                        <tr>
                                            <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                        </tr>
                                    </table>
                                    </li>
                                    <li class="cart-layer-item"> 
                                        <table>
                                            <tr>
                                                <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                            </tr>
                                            <tr>
                                                <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                            </tr>
                                        </table>
                                        </li>
                                        <li class="cart-layer-item"> 
                                            <table>
                                                <tr>
                                                    <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                    <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                    <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                                </tr>
                                                <tr>
                                                    <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                                </tr>
                                            </table>
                                            </li>
                                            <li class="cart-layer-item"> 
                                                <table>
                                                    <tr>
                                                        <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                        <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                        <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                                    </tr>
                                                </table>
                                                </li>
                       </ul>
   
                       <li class="cart-layer-item-bottom">
                           <span class="cart-layer-item-bottom-text fl">共0件商品 共计￥0.00</span>
                           <span class="cart-layer-item-btn fl">去购物车</span>
                       </li>
                   </ul>
                    </ul>
            
            </div>
        </div>
    </div>


    <!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
    <script>
        //两种判断是否有jquery库的写法：
        // window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/transition.js"></script>
    <script src="js/showhide.js"></script>
    <script src="js/dropdown.js"></script>
    <script src="js/search.js"></script>
    <script src="js/index.js"></script>
    
</body>
</html>

index.css

/*nav-site*/
.nav-site{ /*站点导航整体设置*/
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{  /*站点导航内容块整体设置*/
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
    margin:0 10px;
}

.nav-site-service{
    margin-right:15px;
}
/*下拉菜单样式dropdown*/
.dropdown{
    position: relative;
}
.dropdown-toggle{
    position: relative;
    z-index: 2;
    display:block;
    height: 100%;
    padding: 0 16px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;

}
.dropdown-arrow{
    display: inline-block;
    /*width:8px;
    height:6px;*/
    /*background: url(../img/dropdown-arrow.png) no-repeat;*/
    margin-left:8px;
    vertical-align: middle;
}
/* .dropdown-layer{
    display:none;
    position: absolute;
    top:43px;
    background-color:#fff;
    z-index: 1;
    border: 1px solid red;
} */
.dropdown-left{
    left:0;
    right:auto;

}
.dropdown-right{
    right:0;
    left:auto;

}
.dropdown-item{
    display:block;
    height:30px;
    line-height:30px;
    padding:0 12px;
    color:#4d555d;
    white-space: nowrap;

}
.dropdown-item:hover{
    background-color: #f3f5f7;
}

/*下拉菜单通过js和css来实现dropdown*/

/*.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
    background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
    background-image:url(../img/dropdown-arrow-active.png);
}

.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
    display:block;
}*/

/*header*/
.header{
    width: 100%;
    height: 124px;
    background-color: #f3f5f7;
}
    .header-logo,
    .header .search,
    .header .cart {
        margin-top: 36px;
    }
.header-logo{
    display: block;
    width:136px;
    height: 48px;
    background: url(../img/header-logo.png) no-repeat;
    margin-left:15px;
    
}

.header .search{
    margin-left: 145px;
}


/* cart */
.cart .dropdown-arrow{
    display: inline-block;
    vertical-align: middle ;
    margin-left: 0;
}


.cart-icon{
    padding-left: 5px;
}

common.css

/*公共样式*/

    .container {
        /*站点导航*/
        width: 1200px;
        margin: 0 auto;
    }

    a.link {
        /*链接正常颜色*/
        color: #4d555d;
    }


    a.link:hover {
        /*链接经过颜色*/
        color: #f01414 !important;
    }

    .dropdown {
        position: relative;
    }

    .dropdown-toggle {
        position: relative;
    }

    .dropdown-arrow {
        display: inline-block;
        line-height: 1;
        /*background-repeat: no-repeat;*/
        vertical-align: middle;
        
    }

    .dropdown-layer {
        display: none;
        position: absolute;
        z-index: 1;
    }

    .dropdown-left {
        left: 0;
        right: auto;
    }

    .dropdown-right {
        right: 0;
        left: auto;
    }

     .dropdown-loading{
            width:32px;
            height: 32px;
            background: url(../img/loading.gif) no-repeat;
            margin: 20px;
        }

    .text-hidden{
        text-indent: -9999px;
        overflow: hidden;
    }


.text-ellipsis{
    text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
}

/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

[class*="-active"] .dropdown-arrow {
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.transition {
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}


/*showhide*/

 .fadeOut {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .slideUpDownCollapse {
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .slideLeftRightCollapse {
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }





/*.menu .dropdown*/

.menu .dropdown-toggle {
    display: block;
    height: 100%;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

.menu .dropdown-arrow {
    /*width: 8px;
    height: 6px;
    background-image: url(../img/dropdown-arrow.png);*/
    margin-left: 5px;
}

.menu .dropdown-layer {
    top: 43px;
    background-color: #fff;
    border: 1px solid #cdd0d4;
}

.menu-item {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    color: #4d555d;
    white-space: nowrap;
}

.menu-item:hover {
    background-color: #f3f5f7;
}

.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

.menu-active .dropdown-arrow {
    /*background-image: url(../img/dropdown-arrow-active.png);*/
}

/*.menu-active .dropdown-layer {
    display: block;
}*/





/*search*/
    .search {
        position: relative;
        border: 1px solid #cfd2d5;
    }
    .search-inputbox {
        width: 585px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        background-color: #fff;
        border: none;
    }
    .search-btn {
        width: 73px;
        height: 40px;
        line-height: 40px;
        background-color: #07111b;
        border:none;
        font-size: 14px;
        color: #fff;
        text-align: center;
        cursor:pointer;
    }
    .search-layer {
        display: none;
        position: absolute;
        top: 100%;
        left: -1px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #cfd2d5;
    }
    .search-layer-item {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        cursor: pointer;

    }
    .search-layer-item:hover {
        background-color: #f3f5f7;
    }


/* cart */

    .cart{
        position: relative;
        margin-right:15px;
        z-index: 0 !important;
    }

    .cart-link{
        color: white;
    }

    [class*="-active"] .cart-title{
        color: #f01414;
        background-color: white;
        box-shadow: -1px -2px 3px rgb(192, 192, 192);
    }

    .cart-title{
        position: absolute;
        width: 124px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-color: #f01414;

    }

    .cart-layer{
        padding: 0 20px;
        margin-left: -157px;
        margin-top:-4px;
        position: absolute;
        width: 270px;
        height: 410px;
        overflow: hidden;
        z-index: 0 !important;
        box-shadow: -1px -1px 3px rgb(192, 192, 192);
        background-color:#fff;
    }

    .cart-layer-text{
        position: relative;
        width: 270px;
        padding-right: 20px;
        height: 300px;
        overflow: auto;
    }

    .cart-layer-item{

        border-bottom: 1px solid rgb(192, 192, 192); 
        height: 70px;
    }



    .cart-layer-item-title{
        margin-left: -20px;
        width: 300px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 30px;
        height: 40px;
        line-height: 40px;
        box-shadow: 0px -2px 13px rgba(189, 187, 187, 0.788);
    }

    /* cart-table */
    .cart-layer-item table{
        position: absolute;
        margin-top: 8px;
        left: 5px;
    }

    .cart-layer-item td{
        /* border: 1px solid red; */
        height: 8px;
        line-height: 20px;
    }
    .cart-layer-item tr{
        width: 200px;
    }

    .cart-layer-item-text{
        padding: 5px 0 0 15px;
        font-weight: bold;
    }

    .cart-layer-item-btn{
        position: absolute;
        margin-top: 17px;
        width: 70px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #f01414;
        display: block;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        margin-left: 190px;
    }

    .cart-layer-item-bottom-text{
        position: absolute;
        height: 70px;
        width: 300px;
        margin-left: -20px;
        line-height: 70px;
        font-weight: bold;
        font-size: 14px;
        padding-left: 35px;
        box-shadow: 0px -1px 5px rgba(189, 187, 187, 0.788);
    }

    .cart-layer-item-close a{
        position: absolute;
        padding-left: 25px;
        font-weight: bold;
        color: rgb(124, 124, 124);
        top: 18px;
        width: 1px;
        height: 1px;
    }

    .cart-loading{
        display: block;
        width:500px;
        height: 200px;
        background: url(../img/loading.gif) no-repeat;
        margin: 200px 0px 60px 115px;
    }

base.css

/*css reset*/
    /*清除内外边距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表单元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }

    /*重置默认样式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }

    a {
        text-decoration: none;
        color: black;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }

/*常用公共样式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;
        
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

index.js

(function($) {

//menu
    $(".dropdown").dropdown({

        css3: true,
        js: false

    });

    $('.dropdown').on('dropdown-show', function(e) {
        var $this = $(this),
            dataLoad = $this.data('load');
            console.log(dataLoad);
        if (!dataLoad) return;

        if (!$this.data('loaded')) {
            var $layer = $this.find('.dropdown-layer'),
                html = '';

            $.getJSON(dataLoad, function(data) {
                // console.log(1);
                // setTimeout(function () {
                for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
                }
                $layer.html(html);
                $this.data('loaded', true);
                // }, 1000);
            });
        }
    });

//header search
    var $headerSearch = $('#header-search');
    var html = '',
        maxNum = 10;

    // 获得数据处理
    $headerSearch.on('search-getData', function(e, data) {
        var $this = $(this);
        html = createHeaderSearchLayer(data, maxNum);
        $this.search('appendLayer', html);
        // 将生成的html呈现在页面中        
        if (html) {
            $this.search('showLayer');
        } else {
            $this.search('hideLayer');

        }
    }).on('search-noData', function(e) {
        // 没获得数据处理
        $(this).search('hideLayer').search('appendLayer', '');

    }).on('click', '.search-layer-item', function() {
        // 点击每项时，提交
        $headerSearch.search('setInputVal', $(this).html());
        $headerSearch.search('submit');
    });

    $headerSearch.search({
        autocomplete: true,
        css3: false,
        js: false,
        animation: 'fade',
        getDataInterval: 0
    });

    // 获取数据，生成html
    function createHeaderSearchLayer(data, maxNum) {
        var html = '',
            dataNum = data['result'].length;

        if (dataNum === 0) {
            return '';
        }
        for (var i = 0; i < dataNum; i++) {
            if (i >= maxNum) break;
            html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
        }
        return html;

    }

// header cart

    $('.cart').dropdown({
        css3:true,
        js:true,
        animation:'fadeslideUpDown',
        active:'cart'
    });

    $('.cart').on('dropdown-show',function(e){
        // alert(2)
        var $this=$(this),
        dataLoad=$this.data('load');
        console.log(dataLoad);
        // alert(4);
        if(!dataLoad) return;

        if(!$this.data('loaded')){
            var $layer=$this.find('.cart-layer'),
            html='',
            html1='<li class="cart-layer-item-title">最新加入商品</li>',
            html2='',
            html3='<li class="cart-layer-item-bottom"><span class="cart-layer-item-bottom-text fl">共0件商品 共计￥0.00</span><span class="cart-layer-item-btn fl">去购物车</span></li>';
            


            $.getJSON(dataLoad,function(data){
            
                for(var i=0;i<data.length;i++){
                    html2+='<li class="cart-layer-item">'+
                    '<table>'+
                        '<tr>'+
                            '<td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="'+data[i].url+'"></a></td>'+
                            '<td class="cart-layer-item-text"><a href="###">'+data[i].name+'</a></td>'+
                            '<td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td class="cart-layer-item-text"><a href="###">'+data[i].price+'</a></td>'+
                        '</tr>'+
                    '</table>'+
                    '</li>';
                }


                    
                html=html1+html2+html3;
                $layer.html(html);
                $this.data("loaded",true);
                
            });//eeeeeee


        }
    });


})(jQuery);

cart.json

[
    {
        "url":"./img/cart/1.png",
        "price":"￥335",
        "name":"adidas 阿迪达斯 训练 男子"
    },
    {
        "url":"./img/cart/2.png",
        "price":"￥199",
        "name":"玉兰油多效呵护三部曲套装"
    },
    {
        "url":"./img/cart/3.png",
        "price":"￥6188",
        "name":"Apple iPhone 7（A1660）"
    },
    {
        "url":"./img/cart/4.png",
        "price":"￥659",
        "name":"飞利浦面条机123456/11"
    },
    {
        "url":"./img/cart/5.png",
        "price":"￥2999",
        "name":"罗技G29 力反馈游戏方向"
    },
    {
        "url":"./img/cart/6.png",
        "price":"￥6188",
        "name":"adidas 阿迪达斯 训练 男子"
    },
    {
        "url":"./img/cart/7.png",
        "price":"￥199",
        "name":"adidas 阿迪达斯 训练 男子"
    }
]

陈立天 2020-05-17

源自：实战：搜索功能组件化 3-5 自由编程

收起

9回答

好帮手慕久久回答被采纳获得+3积分 2020-05-19 13:59:53

同学你好，layer的显示问题是将动画形式设置为slideUpDown（animation: 'slideUpDown'），并且在ie浏览器中预览时出现的吗？如果是的话，老师这边经过测试，发现ie8和ie9可以正常显示，ie10和ie11不可以，主要原因是底部元素设置的定位属性影响了动画，可调整如下：

大多数浏览器都会将css和js等文件缓存起来，所以有时候更改内容页面会不刷新，可以采取ctrl+f5强制刷新页面。

phpstudy内部可能对缓存做了处理，所以会及时更新页面。

另外，ie浏览器有很多兼容性问题，建议同学在学习阶段，使用谷歌浏览器测试代码，实际工作中，大部分公司也不考虑兼容性问题，同学只需了解常见的一些兼容性问题即可。

祝学习愉快！

收起回答

提问者陈立天 2020-05-18 19:40:52

完全显示出来layer是这样的。。对比一下三张图就看到明显的显示不一致了，怎么解决这个问题？

收起回答

提问者陈立天 #1

老师发现问题了，在本地的IE浏览器打开就会这样，用phpstudy打开就不会了。这是什么原因？

2020-05-18 21:44:45
提问者陈立天 #2

另外还想知道的是我把css js img 这些文件放到phpstudy目录下发现把目录的css 和js等文件删除了访问该网页的js和css仍然生效？然后清除了缓存就没了。是不是浏览器所有访问过的网页 css js 都会缓存到浏览器当中？

2020-05-18 21:58:21