1
灰色阴影
有很多细心的小伙伴应该能注意到，在开发的过程中超链接，按钮在按下的时候，在元素身上会出现灰色的阴影，闪烁一下。然而这样会给用户体验带来不好的影响，对于这个问题到底应该怎么解决？
解决方法：
a,input,button{
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
2
按钮 IOS 下默认样式
在开发的过程中按照设计图给 button 编写好 css 样式，在 PC 端进行测试的时候没有任何异常，但是通过真机测试的时候就会发现自己写的 css 样式，被 IOS 的默认样式给干掉了，和自己想的完全不一样。
解决方法：
input[type="button"],
input[type="submit"],
input[type="reset"]{
appearance: none;
-webkit-appearance: none;
}
textarea{
appearance: none;
-webkit-appearance: none;
}
主轴（X轴）富余空间管理
给父级级div添加css样式
-
-wekit-box-pack:start;
在主轴开始位置，富余空间在主轴的结束位置
-
-wekit-box-pack:end;
元素在主轴结束位置，富余空间在主轴的开始位置
-
-wekit-box-pack:center;
富余空间平均分配，放在元素两侧位置
-
-wekit-box-pack:justify;
富余空间平均分配在每两个元素之间
3. 侧轴（Y轴）富余空间管理
给父级级div添加css样式
-
-webkit-box-align:star;
元素在侧轴开始位置，富余空间在侧轴的结束位置
-
-webkit-box-align:end;
元素在侧轴结束位置，富余空间在侧轴的开始位置
-
-wbekit-box-align:center;
富余空间平均分配，放在元素两侧位置
这里需要注意喽，以上所有属性都是要加给父级的哦，给子元素会没有任何效果的。
4. 元素弹性空间
给子元素添加css样式
-webkit-boxt-flex:number;
更改css属性
*{
margin:0px;
padding:0px;
}
#box {
height:400px;
display:-webkit-box;
background:green;
}
#box div {
width:50px;
height:50px;
background:red;
margin:5px;
}
#box div:nth-child(1){
-webkit-box-flex:1;
}
#box div:nth-child(2){
-webkit-box-flex:2;
}
#box div:nth-child(3){
-webkit-box-flex:3;
}
#box div:nth-child(4){
-webkit-box-flex:4;
}
#box div:nth-child(5){
-webkit-box-flex:5;
}
5.HTML5 相应式虽然很强大，但仍然是比较新兴的技术，PC 端对与相应式的处理兼容并不是特别的好，IE8 以上的版本才会兼容响应式的处理与兼容。那么IE8 以下版本应该如何做到兼容呢？
引入远程兼容 javascript 文件，也可以把 javascript 文件*载下**到本地进行响应式的兼容
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
6.
移动设备像素比
说到像素比，那么到底什么是像素比呢？像素比是浏览器厂商出产时候对移动设备的设置，把一个像素放大至 N 个像素去显示，这里的 N = 像素比。我们对像素比的属性只能获取，不能对其进行设置。
举个栗子 ：
现在有个 div，设置 CSS 属性，假设当前设备获取到的像素比为：2
<div id="box"></div>
<style type="text/css">
#box{
width:100px;
height:100px;
background:red;
}
</style>