常见的浏览器内核主要有四种：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
<div id="box1"></div>
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；
标准写法：
<div class="arrow" id="arrow" onselectstart="return false;">123</div>
#arrow {
-moz-user-select:none;
}
不全不对的地方请大家留言补充修改，谢谢！
网友评论