前端开发兼容注意事项

前端浏览器兼容是前端必备的知识，我给大家分享一下我在工作中遇到兼容问题(常规浏览器、IE9及其以上浏览器）。
首先推介一个浏览器兼容检测网站。https://www.caniuse.com/。    ul{
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
    }
    ul li{
     float:left;/*为了兼容IE给li子元素加浮动*/
    }
2.2 在ie下面有图片边框。
  解决方法：给图片加border:0或者border:0 none;
2.3 图片在div里面有间隙。
 解决办法：给图片转换为块级元素,display:block;
2.4 表单行高在不同浏览器下不一致。
 解决办法：给表单元素加float:left。
2.5 ipnut和button在不同浏览器下面高度不同统一大小。
解决办法：加高度统一大小。
2.6 当前元素（父元素里面的第一个子元素）与父元素没有设置任何浮动的情况下，设 置margin-top后 会错误的把margin-top加在父元素上。
解决办法：给父元素添加声明overflow：hidden或者给父元素的子元素添加浮动。
2.7 透明度opacity属性在IE下面失效。
 解决办法：兼容其它浏览器写法：opacity：value；（value取值0-1）
        ie浏览器写法：filter：alpha（opacity=value）；取值1-100（整数）
2.8 ie9中img只给width或者height失效。
 解决办法：二个属性都得设置。
2.9 ie9中特定条件下绝对定位失效。
 解决办法：相对定位内的绝对定位元素内部的相对定位元素，ie9下会嵌套异常。
三、js的兼容问题。
3.1 addEventListener监听事件在IE下面无效。
解决办法：
 var x = document.getElementById("myBtn");
if (x.addEventListener) {   //所有主流浏览器，除了 IE 8 及更早 IE版本              
 x.addEventListener("click", myFunction);
 } else if (x.attachEvent) {  // IE 8 及更早 IE 版本
 x.attachEvent("onclick", myFunction);
}
3.2 IE9不兼容event.preventDefault，禁止事件右键点击出默认浏览器菜单。
解决办法：
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
3.3 IE9及其以下浏览器不兼容event.stopPropagation冒泡事件。
解决办法：
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);
   3.4 IE9不兼容event.preventDefault，禁止事件右键点击出默认浏览器菜单。
解决办法：
event.preventDefault ? event.preventDefault() : (event.returnValue = false)
   3.5 IE和主流浏览器的键盘事件需要兼容。
解决办法：
functiongetKeyCode(e) { e = e ? e : (window.event ? window.event : "") return     e.keyCode ? e.keyCode : e.which }}
   3.6 获取窗口大小兼容写法。
解决办法：网页内容实际宽高（包括工具栏和滚动条等边线）

var scroll_w =
document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h =
document.documentElement.scrollHeight || document.body.scrollHeight;  
3.7 new Date()构造函数的写法并不能被各个浏览器识别。
解决办法：new Date(str)来正确生成日期对象
四、移动端
4.1 border的1px在不同设备上面显示会不同，在2倍屏幕对应成2px多像素。
解决办法：css解决代码，文档底部贴出.
4.2 点击事件过300毫秒才执行（为了判断是否用户执行双击的默认事件）。
解决办法：使用fastclick.js.



解决移动端1px边框像素问题
@charset;utf-8;
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
left: 0;
width: 100%;
height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
top: 0;
width: 1px;
height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.5);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
.border::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.33333);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.33333);
}
}

怎么删除？？？