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="" 图片整合（精灵图，雪碧图） 代码结构清晰