前端开发常见的兼容性问题及解决方案

IE兼容性标签写法：

---

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

webkit浏览器中input获得焦点后，自动产生黄色边框

---

解决方法：给input增加样式

outline: none;

inline-block 布局bug解析

---

display: inline-block;
white-space: nowrap;

使用这两个样式布局的时候
会出现 中间有空白的情况

解决办法是 给他们的父级设置 font-size:0

三种清除浮动的解决办法

---

1.给父级元素设置

overflow：hidden

2.给父级样式设置

:after

示例

#id li:after {
  content: "";
  display: block;
  clear: both;
}

3.添加空div
然后给空div设置

clear:both
height:0
font-size:0

解决swiper在iphone6中闪白的问题

---

.swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        overflow:hidden;
}
.flipInX{
      -webkit-backface-visibility:hidden!important;
     //出现问题的原因 可能是backface-visibility属性的兼容问题导致的
}

jquery 滚动兼容性

---

$('#wrap').on("mousewheel DOMMouseScroll", function (e) {
     var delta =(e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1))||  (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); 
      // firefox
      if (delta > 0) {
      // 向上滚
      } else if (delta < 0) {
      // 向下滚
      }
 });

请参考笔记 ，奇怪的 && 和 ||
当两个值都为布尔值的时候 会返回布尔值
但是 两个都是变量的时候 会返回后面那个变量的值 这是非常奇怪的

去掉苹果手机默认的按钮样式

---

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

}

textarea {  -webkit-appearance: none;}

去掉苹果手机默认的按钮样式

手机阻止默认事件

---

document.addEventListener("touchmove",function(ev) {
     var event=ev||window.event;
     if (_body.classList.contains("active")) {
     event.preventDefault();
   };
},false)

注意手机阻止默认事件，不可以加到某一个层上面
需要加到全局document上，确实非常的坑爹

另外，使用classList.contains("class") 可以检查元素是否拥有某样式

左边是图片 右边是文字的布局

---

给左边的图片设置vertical-align:top
然后使用padding-top的方式去布局就不会左右不对称了
这种情况是图片和行高的大小差不多的情况 即 图片大于文字的大小

如果图片比文字小就需要使用vertical-align:middle去布局了

常见的浏览器内核

---

internet explorer -- Trident
Mozilla Firefox -- Gecko
opera -- Presto
safari / chrome -- WebKit