常见兼容问题处理方法

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

 

-webkit-overflow-scrolling: touch;

 

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

 

1. 设置  display:block
2. 设置父元素font-size:0;
3. 设置图片的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的后面好像有多了一个<br />,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...   // 功能代码
  }
});

 

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

 

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

 

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

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

 

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

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;
           }
   });

});