帮你解决现在常遇到的浏览器兼容问题。

浏览器兼容问题

概念

1.什么是浏览器兼容

• 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。
• 在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
  (手机、电脑、js、html、css

浏览器兼容问题之html,css

1.几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用。

• 解决方案：使用float属性为img布局，因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

2.标签最低高度设置min-height不兼容

• 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

3.清除浮动

• 解决办法
  1.兼容box{ display:table;} //将对象作为块元素级的表格显示
  2.兼容box{ clear:both;}
  3.after（伪对象）设置在对象后发生的内容，IE不支持此伪对象

    .box:after{ 
    content: “.”; 
    display: block; 
    height: 0; 
    clear: both; 
    overflow:hidden;
    visibility: hidden; 
    } 
  

4.css3的定位？让一个容器水平垂直居中？

• 解决办法
  方法一：position加margin
  方法二： diaplay:table-cell
  方法三：position加 transform
  方法四：flex;align-items: center;justify-content: center
  方法五：display:flex;margin:auto
  方法六：纯position
  方法七：兼容低版本浏览器，不固定宽高

5.超链接点击过后hover样式就不出现的问题？被点击访问过的超链接样式不再具有hover和active样式了,

• 解决方法
  改变CSS属性的排列顺序: L-V-H-A

6.为什么web标准中无法设置IE浏览器滚动条颜色了？

原来样式设置：

<style type="text/css"> 
    body { 
     scrollbar-face-color:#f6f6f6;
     scrollbar-highlight-color:#fff; 
     scrollbar-shadow-color:#eeeeee; 
     scrollbar-3dlight-color:#eeeeee; 
     scrollbar-arrow-color:#000; 
     scrollbar-track-color:#fff; 
     scrollbar-darkshadow-color:#fff; 
     } 
</style>

• 解决办法
  将body换成html

7.显示手型cursor:hand

问题：

   ie6/7/8、opera      都支持  但是safari 、 ff 不支持

• 解决办法
  写成 cursor:pointer; (所有浏览器都能识别)

8.子容器都float以后，父容器没有设定高度，造成的高度塌陷问题

• 解决办法：
  只需要添加一个clear:both的div，代码如下：

    <divstyle="width:100px;border:1px solid #333; float:left; ">子容器a</div>
  
    <divstyle="width:100px;border:1px solid #333; float:left;">子容器b</div>
  
    <divstyle="clear:both"></div>
  

浏览器兼容问题之js

1.innerText的问题，innerText 在IE中能正常工作，但是innerText 在FireFox中却不行

• 解决方法：
  在非IE浏览器中使用textContent代替innerText

2.禁止选取网页内容，FF（火狐）需要用CSS禁止，IE用JS禁止

• 解决方法：
  IE: obj.onselectstart = function() {return false;}
  FF: -moz-user-select:none;

3.关于使用 event对象，出现的兼容性问题

• 解决方法：
  Function(event){
  e = ev||event
  }

4.关于获取滚动条时,出现的兼容问题

• 解决方法：
  Var scrollTop = document.documentElment.scrollTop || document.body.scrollTop

5.阻止浏览器默认行为的兼容

  preventDefault : 
      	function(event){
        	If(event.preventDefault){
        		Event.preventDefault()
        	}else{
        		Event.returnValue = false
  		}

6.阻止事件冒泡的兼容

    stopPropagation : function(event){
    	If(event.stopPropagetion){
    		Event.stopPropagetion()
    	}else{
  		    Event.cancelBubble = true
    	}
    }

移动端兼容问题

移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

针对跨终端适配主要包括两种方法：

• 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；
  主要采用jQuery+响应式布局+CSS预处理器（sass和less）；
  这种方法只需要维护一套页面，成本比较低，通过响应式布局来实现适配各种终端设备；因为需要加载适配各个终端的各个资源，部分交互效果需要在页面中作终端判断，影响页面响应速度。如果图片资源为一套的话，会出现页面在超高分辨率终端设备打开时图片失真的问题

• 第二种是通过终端判断分别调取不同的资源以适配所有终端。
  采用zepto+响应式+CSS+终端适配
  这种方法可以根据各种不同的终端做个性化设计，例如移动端的加速度感应以及各种手势实现的效果，PC端可以不受流量限制等。相应的会增加维护成本。