常见兼容问题处理方法罗列一些项目中经常遇到的一系列兼容性问题，主要针对ios以及低版本浏览器。解决后能够更好的提高用户体

一. 用于修复iOS下 overflow: scroll 时不能平滑滚动的问题

-webkit-overflow-scrolling: touch;

二. 图片底部空白-解决方案

设置 display:block
设置父元素font-size:0;
设置图片的vertical-align:top|bottom..

三. IE6下，并不支持position:fixed属性

这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的作用大家都很熟悉，相对于父元素进行绝对定位，然后我们可以通过expression来改变#ads的top值。

#ads{
    _position:absolute;
     _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

造成另外一个问题滚动有抖动问题

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

四. 空标签绝对定位 ie6消失bug

设置该标签

background:url(about:blank)

五. 尽量给 URL 的最后加上一个斜杠 / 比如我们在浏览器里打开

http://www.hzins.com/jindoushangcheng

会先 301 重定向到

http://www.hzins.com/jindoushangcheng/

然后才开始请求页面内容资源

六. 最小高度兼容写法

.demo {
		min-height: 100px;
		height: auto !important;
		height: 100px;
	}

七. IE6下把a设为display:block时有个问题

在Ie6下a的后面好像有多了一个
,ie7 ff下正常显示
在a上加多个zoom:1;

八. 移动端断点媒体查询

$base-fonts-default: 100px; //基准数
$max-container: 640px;
$responsives: 320px, 360px, 375px, 384px, 414px, 480px, 640px;  // 屏幕断点

@mixin fz($values){
    font-size: $values * $base-fonts-default / $max-container;
}
@each $responsive in $responsives {
  @media only screen and (min-width: #{$responsive}) {
        html{ @include fz($responsive);}
   }
}

九. 移动端垂直居中

div.parent {
  display: table;
  width:100%;    
}

div.child {
  display:table-cell;
  align-vertical: middle;    
}

十. 移动端flexbox等分兼容写法

div.parent {
  display: -webkit-box; 
  display: -moz-box; 
  display: -webkit-flex;
  display: -moz-flex; 
  display: flex;
  width:100%;//兼容火狐
}

div.child｛
width: 100%;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
｝

十一. 列表li的楼梯Bug

li在IE6下呈楼梯状的效果，也可以算是IE6的一个经典Bug了吧。他通常发生在li中放置了一些元素内容（比如说a）而且对其进行浮动，但li本身不浮动，解决这个bug最简单的方法，只需要在li元素中也加上一个浮动

十二.关于点击空白关闭弹窗的js写法之一？

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ 
    some code...   // 功能代码
  }
});

原理：判断点击事件发生在区域外的条件是：

点击事件的对象不是目标区域本身
事件对象同时也不是目标区域的子元素

十三.css3选择器之first-child与last-child

如果父元素的第一个元素或者最后一个元素不是寻找的标签的话，会不起作用

十四. 含有中文的
宽度不能自适应

css用了postion: absolute就有这个问题。 li 属性内添加：white-space:nowrap

十五.css强制性换行

word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/

十六.取消手机页面点击a中图片出现的虚线框问题

-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;

十七.禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

十八.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

十九.强制折行

word-wrap: break-word; 
word-break: break-all;

二十. 清除 iOS 下 input 表单的阴影

在IOS下，input 表单默认会有个内阴影，一定程度上影响视觉一致，可通过设置下面代码去掉：

input{
    -webkit-appearance: none;
}

二十一.测试发现，在 Android 欧朋浏览器中，同时设置border-radius，border和背景色的时候，背景色会溢出到圆角以外部分，可以使用背景剪裁

background-clip: padding-box;

来修复

二十二. IE6不支持!important的，用_background:none;

二十三. h5禁止a链接长按弹窗

a { -webkit-touch-callout:none}

二十四. iPhone 6 Plus 阴影失效

 border-radius:1px; //修复ios下阴影失效的问题呢

二十五.输入框默认文字实现placeholder效果（对密码框不适应）

$('.default-value').each(function() {

   var default_value = this.value;

   $(this).focus(function(){
           if(this.value == default_value) {
                   this.value = '';
           }
   });

   $(this).blur(function(){
           if(this.value == '') {
                   this.value = default_value;
           }
   });

});

常见兼容问题处理方法