1、不同浏览器的标签默认的margin和padding不同
随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:
CSS里*{margin:0;padding:0;}
但是性能不好一般我们会引入reset.css样式重置;
2、图片加a标签在IE9中会有边框
解决方案:img{border: none;}
3、边距重叠问题;
当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
4、cursor:hand 显示手型在safari 上不支持
解决方案:统一使用 cursor:pointer
5、IE不支持ES6语法
解决方案:用Babel进行转换
6、移动端。在安卓机上placeholder文字设置行高会偏上
解决方案:input有placeholder情况下不要设置行高
7、overflow:scroll,或者auto在iOS上滑动卡顿的问题
解决方案:加入-webkit-overflow-scrolling:touch;
8、移动端click 300ms 延时响应
解决方案:使用 Fastclick
window.addEventListener( "load", function() {FastClick.attach( document.body );}, false );
9、input为fixed定位,错位问题。
在ios下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置。
解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题
10、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。
解决方案:使用opacity=1来解决
11、对非可点击元素如(label,span)监听click事件,部分ios版本下不会触发。
解决方案:css增加cursor:pointer
12、IE浏览器使用GET发送请求时,如果两次请求的地址和参数相同,在不刷新页面的情况下,浏览器会缓存第一次请求的内容。
需要在axios中,给get请求加个时间戳