html 浏览器兼容ie前缀,前端css\js浏览器兼容性问题及处理方案

常见的浏览器内核主要有四种：Webkit内核、Presto内核、Trident内核、Gecko内核。

HTML兼容

CSS兼容

JavaScript兼容

1. HTML兼容

对于HTML兼容，这是由于低版本浏览器不能识别一些高版本浏览器使用的标签，从而导致不能解析，比如Html5 新语义标签 如header, section, footer, aside, nav, main, article, figure等 IE9及以上全支持。这类兼容性问题比较容易处理。(不使用就可以了😁)

2. CSS兼容

问题一：不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同

问题表现：标签在不加样式的情况下外补丁(margin)和内补丁(padding)存在差异

解决方法：在css里添加如下代码

*{

margin: 0;

padding: 0;

}

问题二：IE6下margin值双倍边距问题

问题表现：IE6下元素浮动之后margin值变成双倍

解决方法：将元素转为行内属性

{

display: inline;

}

问题三：height值设置过小问题

问题表现：IE6、IE7下设置标签高度小于10px，存在超出已设置的高度的问题

解决方法：为超出高度的元素添加溢出部分隐藏

{

overflow: hidden;

}

问题四：标签min-height属性不兼容问题

问题表现：min-height属性本身就是一个不兼容CSS属性，所以min-height不能很好地被各个浏览器兼容

解决方法：例如要为一个标签设置最小高度为200px

{

min-height: 200px;

height: auto!important;

height: 200px;

overflow: visible;

}

问题五：图片元素img下默认有间距

问题表现：IE6下图片元素img出现多余空白

解决方法：图片使用float属性

问题六：opacity多浏览器透明度兼容问题

问题表现：opacity是css3里的属性，只有部分浏览器支持

解决方法：使用各个浏览器的私有属性以支持opacity

{

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

-moz-opacity: 0.5;/*老版Mozilla*/

-khtml-opacity: 0.5;/*老版Safari*/

opacity: 0.5;

}

问题七：Firefox和Chrome不兼容cursor:hand

解决方法：cursor:poniter兼容所有浏览器

问题八：IE6的3px Bug

问题表现：一个标签浮动，另一个不浮动的元素自然上浮与之靠近出现3px间距

解决方法：对浮动的标签设置_margin-right: -3px;

{

_margin-right: -3px;

}

问题九：display:inline-block元素之间空隙

问题表现：将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，原因是HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度

解决方法：

(1)标签不换行。

(2)父级标签font-size:0px;

问题十：CSS3 @media 查询 支持ie9及以上

解决方法：js辅助判断

问题十一：background-size ie9及以上支持 /现在的浏览器不需要加前缀了/

解决方法：

.parent {

width: 400px;

height: 400px;

margin: 100px;

border: 1px solid red;

background: url(img/aaa.jpg) no-repeat center center;

background-size: 100% 100%;

/*针对IE8的hack，目的是除掉之前background*/

background: none\9;

/*下一行为关键设置*/

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');

}

问题十二：

transtation属性只支持ie10及以上，所以过渡效果不一定有效

@keyframe 规则和 animation 属性只支持ie10及以上

transform ：

IE10、Firefox、Opera 支持 transform 属性。

IE9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

问题十三：border-radius 只支持ie9以上

问题十四：rgba 只支持ie9及以上浏览器，ie8要用滤镜处理

3. JavaScript兼容

问题一：event.x与event.y

问题表现：IE下,event对象有x,y属性,但是没有pageX,pageY属性；其它,event对象有pageX,pageY属性,但是没有x,y属性。

解决方法：

eventX = event.x ? event.x : event.pageX

问题二：event.srcElement

问题表现：IE下，even对象有srcElement属性，但是没有target属性

解决方法：

eventTarget = event.srcElement ? event.srcElement : event.target

问题三：获取事件对象

var e = eve || window.event

问题四：获取键盘编码

var e = eve || window.event

var keyValue = e.keyCode || e.charCode || e.which

问题五：阻止事件冒泡

var e = eve || window.event

e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

问题六：阻止超链接的默认行为

var e = eve || window.event

e.preventDefault ? e.preventDefault() : e.returnValue = false

问题七：添加事件监听

function addEventListener(obj,event,fn,boo){

if(obj.addEventListener){

obj.addEventListener(event,fn,boo);

}else{

obj.attachEvent("on" + event,fn);

}

}

运用: addEventListener(oBtn,"click",fn1,false);

问题八：移除事件监听

function removeEventListener(obj,evt,fn,boo){

if(obj.removeEventListener){

obj.removeEventListener(evt,fn,boo);

}else{

obj.detachEvent("on" + evt,fn);

}

}

运用：removeEventListener(oBtn,"click",fn2,false);

问题九：获取鼠标键值的 event.button

function getbutton(eve){

var e = eve || window.event;

if(eve){//判断是否为标准浏览器

return e.button

}else if(window.event){//判断是不是IE

switch(e.button){

case 1 : return 0;

case 4 : return 1;

case 2 : return 2;

}

}

}

问题十：使用getAttribute获取className

var oBox=document.getElementById("box1")

console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持

console.log(oBox.getAttribute("class")//标准浏览器支持，ie7不支持

兼容写法：

function fn(obj){

if(obj.getAttribute("class"))==null{

return obj.getAttribute("className");

}else{

return obj.getAttribute("class")

}

}

问题十一：getElementsByClassName("class属性名称")不兼容

console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持，ie8以下不支持

兼容写法：

function fn(obj.class属性名称){

if(obj.getElementsByClassName){

return obj.getElementsByClassName(className);

}else{

var list = [];

var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素

for(var i = 0;i < arr.length;i ++){

if(arr[i].className == className){

list.push(arr[i]);

}

}

return list;

}

}

遍历所有元素，找出class名为指定名字的元素

问题十二：获取非行内样式的兼容

var oBox = document.getElementById("box");

function getStyle(obj,attr){

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true[attr];

};

var s = getStyle(oBox,"width");

问题十三：localStorage和sessionStorage ie8及以上支持

解决方法：低版本浏览器使用Cookie

问题十四：onselectstart 事件，用来禁用文字选中

webkit浏览器：行内加onselectstart="return false;"

firefox 行内或css加-moz-user-select：none；

标准写法：

123

#arrow {

-moz-user-select:none;

}

不全不对的地方请大家留言补充修改，谢谢！