浏览器的兼容性问题

一：css兼容性问题

　　1：通常我们写代码在css开始的时候就会写

　　　　*{

　　　　　　margin:0;

　　　　　　padding:0;

　　　　　}

　　　　其主要原因就是不同浏览器对标签不加样式控制的情况下，各自的margin 和padding差异较大，这就会造成差异；

　　　　解决方案：css 里面加上上述代码 （通配符*来设置各个标签的内外补丁是0）。

　　2：块元素 设置float后，有margin情况下，本来在一行的东西，最后一个元素被挤到下一行；

　　　　主要原因：布局用div+css布局的话，div设置float，横向距离用margin设置的话，IE6显示margin比设置的大，所以就会被挤到下一行；

　　　　解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

　　3：几个图片排列在一起，图片之间有缝隙，设置通配符间距为0也不好使，

　　　　主要原因：mg标签放在一起的时候，有些浏览器会有默认的间距，通配符也不起作用。

　　　　解决方案：给img加上float属性；你建议用margin设置为负数解决为题，因为margin本身也有兼容性问题

　　4:行元素 设置display:block;又设置float属性，会出现上述问题2的问题；

　　　　解决方案：在display:block;后面加入display:inline;display:table;

　　5：透明度的问题

　　　　一句话搞定背景透明：

　　　　.op_class{

　　　　　　 filter:alpha(opacity=50);   //IE

　　　　　　-moz-opacity:0.5;   //火狐

　　　　　　 -khtml-opacity: 0.5; //Safari (1.x)

　　　　　　opacity: 0.5; //Firefox, Safari, and Opera. 

　　　　}

　　通常我们会看到有这样的写法： !important；!important这个属性IE不能识别，但别的浏览器可以识别

　　例如火狐(FF) 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width ;

　　注意写的先后顺序不能颠倒；

　　写法：div{margin:30px!important;margin:28px;} 

 二：js常见的兼容性问题；

　　1：event = event || window.event;

　　　　问题原因：window.event只能在IE下使用，不能在火狐下使用，火狐使用event

　　　　例如：在浏览器上获取鼠标的位置：

　　　　<button onclick="onClick()" >获得鼠标点击横坐标</button>

 

　　　　<script type="text/javascript">

 

　　　　　　function onclick(){

 

　　　　　　　　alert(event.clientX);

 

　　　　　　}

 

　　　　</script>

　　　　上述这样写只能在ie下获取到鼠标的位置，想要在所有浏览器中获取到位置需改成：

 

　　　　<button onclick="onClick(event)">获得OuterHTML</button>

　　　　<script type="text/javascript">

　　　　function onclick(event){

　　　　　　event = event || window.event;

　　　　　　　　alert(event.clientX);

　　　　　　}

　　　　</script>

　　2：获取html对象的问题：

 

　　　　FireFox获取方式document.getElementById("idName")

 

　　　　ie使用document.idname或者document.getElementById("idName")

 

　　　　解决办法：统一使用document.getElementById("idName");

　　

　　3：innerText的问题

　　　　

　　　　innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；

　　　　

　　　　解决办法：做个浏览器识别写个兼容性写法　　

　　　　if(navigator.appName.indexOf("Explorer") > -1) {

　　　　　　document.getElementById('element').innerText = "my text";

　　　　} else{

　　　　　　document.getElementById('element').textContent = "my text";

　　　　}

　　4：AJAX获取XMLHTTP的区别

　　　　

　　　　var xmlhttp;

　　　　if (window.XMLHttpRequest) {

　　　　　　xmlhttp = new XMLHttpRequest();

　　　　} elseif (window.ActiveXObject) { // IE的获取方式

　　　　　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　　　　}

　　注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。

 

 

　　关于兼容性问题是没完没了的，还是要有bug的处理能力才行，因为你永远不会知道你会碰到什么问题；