css兼容性问题

1.IE的兼容性问题

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

2.移动端一像素问题

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

3.图片的兼容性

       <!-- 插入图片,默认向下撑大3像素

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

　　    .img{

            background: blue;

           

        }

        .img>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" alt="" />
    </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" alt="">
    </a>

4.图片大小不一致，如何垂直水平居中

       .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" alt=""><span></span>
        </div>
        <div class="wrapper">
            <img src="./wheel.png" alt=""><span></span>
        </div>
    </div>

5.有哪些利于SEO优化的点

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