css兼容性问题

    <!-- ie6的兼容性问题 -->
    <!-- 
        ie6双边距问题 ：给浮动的元素加display:inline
        ie6默认高度问题：font-size:0 或者overflow:hidden
    -->

    <!-- 移动端一像素的边框问题：解析时会显示成2像素，用缩放去解决 -->
    <!-- transform:scaleY(0.5) -->

        img设置为display:block   或者 vertical-align: top;
     -->

    <div class="img">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594434912&di=f7a208ed74b5dd484a2794d31620d53e&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"  />
    </div>

    <!--
        用超链接加载的图片，ie的浏览器都会解析出边框，将图片的额border:none
    -->
    <a href="#">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594434912&di=f7a208ed74b5dd484a2794d31620d53e&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg" >
    </a>

       .img1 .wrapper{
            width: 400px;
            height: 400px;
            background: red;
            float: left;
            margin-left: 10px;
            text-align: center;

        }
        .img1 .wrapper img{
            vertical-align: middle;
        }
        .img1 .wrapper span{
            display: inline-block;
            width: 0;
            height: 100%;
            overflow: hidden;
            vertical-align: middle;
        }

    <div class="img1">
        <div class="wrapper">
            <img src="./img_logo_kuaijiban.png" ><span></span>
        </div>
        <div class="wrapper">
            <img src="./wheel.png" ><span></span>
        </div>
    </div>

        超链接最好用文本
        图片的alt title都要添加
        对于一些没有意思的小图片这两个属性都要添加alt="" title=""
        图片整合（精灵图，雪碧图）
        代码结构清晰