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"  />
    </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>

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

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

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

 

css兼容性问题

上一篇:《大型网站技术架构演进与性能优化》——第八章:全局基础设施优化:资源调度优化


下一篇:TFS如何强制撤销别人的机器签出的文件