浏览器兼容性问题

1.图片下面有缝隙（大于1px）

　　a:把容器的标签和img标签放在同一行

　　b:将img设置为display:block

　　c:vertical-align:center

2.如果图片存在链接，ie会显示蓝色边框

　　<a></img src='./img' ></a>

　　hack:

　　　　img {

　　　　　　border:0;

　　　　}

3.表单元素行高对齐方式不一致

.txt {
　　height: 30px;
}
.btn {
　　height: 30px;
}
<input  class="txt" type="text">
<input class="btn" type="button" value="按钮">

　　hack：

　　　　给元素添加浮动 float\

4.按钮元素默认大小不一致

　　hack：　　

　　　　a：如果按钮不在表单里面，页面中所有的按钮用a超链接模拟

　　　　b: 如果按钮是一张图片的情况下，直接切图当背景即可

　　　　c: input按钮(边框长在自身，长在内部),外面套一个div元素，给外面元素加边框

5.鼠标指针 cursor: hand

　　hack:

　　　　cursor:pointer;

6.不同浏览器之间，标签默认的margin、padding不一致，在项目中要重置css

　　a:标签的margin、padding为0、outline、border

7.移动端1px像素问题

利用伪元素
&::after {
  content: '',
  position: absolut;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  transform: scale(.5,.5)
  transform:top,left;
  box-sizing: border-box;
}

 

.setOnePx{
    position: relative;
    &::after{
      position: absolute;
      content: '';
      background-color: #e5e5e5;
      display: block;
      width: 100%;
      height: 1px; /*no*/
      transform: scale(1, 0.5);
      top: 0;
      left: 0;
    }
  }

 

viewport的scale值

　　

使用边框图片
	border: 1px solid transparent;
        border-image: url('./../../image/96.jpg') 2 repeat;
可扩展性不太好

　

使用box-shadow实现

box-shadow:10px 10px 20px #2B0A33;
水平位移、垂直位移、模糊半径、阴影颜色

模糊

　　

 

 

https://mp.weixin.qq.com/s/UZm5LQ0PuMZXH2kQIhJDpg