浏览器兼容性问题和解决⽅案
简述
    所谓的浏览器兼容性问题,是指因为不同的浏览器对同⼀段代码有不同的解析,造成页⾯显⽰效果不统⼀的情况。
常见的浏览器内核(渲染引擎)
    四种内核: Trident、Gecko、Blink、Webkit
浏览器内核
IE浏览器Trident 内核,也成为 IE 内核
Chrome浏览器Webkit 内核,现在是 Blink 内核
Firefox浏览器Gecko 内核,俗称 Firefox 内核
Safari浏览器Webkit 内核
Opera浏览器最初是⾃⼰的 Presto 内核,后来加⼊⾕歌⼤军,从Webkit⼜到了Blink内核
360浏览器Trident + Blink 双内核
猎豹浏览器Trident + Blink 双内核
百度浏览器Trident 内核
QQ浏览器Trident(兼容模式)+ Webkit(⾼速模式)
CSS兼容性问题
1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同
解决⽅案⼀: css ⾥增加通配符 * { margin: 0; padding: 0; }
解决⽅案⼆: body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }
2. 在 IE6及以下版本中设置了 float,同时⼜设置 margin,就会出现双边距浮动问题
问题描述:任何浮动的元素上的外边距加倍
解决⽅案:在 float 的标签样式控制中加⼊ display: inline; 将其转化为⾏内属性
3. IE6下默认有⾏⾼
解决⽅案:overflow: hidden;或 font-size: 0; 或 line-height: xx px;
4. 图⽚默认有间距
解决⽅案:使⽤ float 属性为 img 布局
5. IE6及以下版本,不⽀持最⼩⾼度 min-height
.
    问题描述:IE6不⽀持 min-height 属性。即使定义了元素⾼度,如果内容超过元素的⾼度,IE6在解析时,会⾃动延长元素的⾼度
解决⽅案:利⽤ IE6 不识别 !important,给元素设置固定⾼度,并且设置元素⾼度⾃动。height: auto !important; height: 300px; min-height: 300px; IE7 及其其他浏览器都识别 !important,虽然定义了 height: 300px,但是 !important 的优先级最⾼。所以内容超过300px 时,还是会⾃动延长。
6. IE8及以下版本不⽀持 opacity
解决⽅案:opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;
7. IE6以下的 3 像素问题
问题描述:两个相邻的 div 之间有3个像素的空隙,⼀个 div 使⽤了 float,⽽另⼀个没有使⽤产⽣的。
解决⽅案⼀:对另⼀个 div 也使⽤ float
解决⽅案⼆:给浮动的 div 添加属性 margin-right: –3px,但是这样写,在其他浏览器⼜会不正常,所以我们需要添加 IE6 的 hack,在属性 margin-right 前添加下划线 margin-right: –3px。( IE6 以及更低版本的 hack,是在属性前⾯添加下划线)
8. 块级元素上下边距合并问题
问题描述:当上下相邻元素都设置了 margin 边距时,margin 将取最⼤值,舍弃⼩值
解决⽅案:可以给⼦元素添加⼀个⽗元素,并设置该⽗元素:overflow: hidden;
9. IE9 以下浏览器不识别 HTML5 新增标签问题
解决⽅案:
<!--[if lt IE 9]>
<script type="text/javascript" src="cdn.bootcss/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
10. margin 塌陷问题
问题描述:如果⼀个⼤盒⼦中包含⼀个⼩盒⼦, 给⼩盒⼦设置 margin-top ⼤盒⼦会⼀起向下平移
解决⽅案⼀:给⽗盒⼦加⼀个边框 border: 1px solid black;
解决⽅案⼆:给⽗盒⼦加 padding-top: xx px;
解决⽅案三:给⽗盒⼦设置属性 overflow: hidden;
解决⽅案四:给⽗盒⼦设置浮动 float: left;
解决⽅案五:给⽗盒⼦设置为⾏内块 display: inline-block;
11. 清除浮动
问题描述:浮动元素撑不开⽗级容器
解决⽅案⼀:额外标签法。在浮动的盒⼦内部最后,再放⼀个块级标签,在这个标签内使⽤ clear: both;
解决⽅案⼆:使⽤ overflow 清除浮动。在⽗元素中添加⼀个属性 overflow: hidden;
解决⽅案三:使⽤伪元素清除浮动。
.clearfix::after {
content: "";      /* 伪元素必须给这个content='' */
display: block;  /* 必须块级才能清除 */
clear: both;      /* 核⼼代码 */
/* 保证伪元素在页⾯中看不到 */
height:0;
line-height:0;
visibility:hidden;
}
/* 兼容 IE 67 */
.clearfix {
*zoom: 1;
}
解决⽅案四:给⽗盒⼦设置⾼度
IE属性过滤器(较为常⽤的hack⽅法)
字符例⼦说明
__height:100px;IE6可以识别
* 、+ 、!*height:100px;IE6 / IE7可以识别
\0/height:100px\0/;IE8可以识别
字符例⼦说明
\9height:100px\9;IE6、7、8、9、10可以识别浏览器CSS兼容前缀
-o-transform:rotate(7deg);// Opera
-ms-transform:rotate(7deg);// IE
-moz-transform:rotate(7deg);// Firefox
-webkit-transform:rotate(7deg);// Chrome
transform:rotate(7deg);// 统⼀标识语句
JS兼容性问写法
1. 获取⽹页宽和⾼的兼容性问题
padding是外边距还是内边距var winW = document.body.clientWidth || document.documentElement.clientWidth  // ⽹页可见区域宽
var winH = document.body.clientHeight || document.documentElement.clientHeight // ⽹页可见区域宽
// 以上为不包括边框的宽⾼,如果是 offsetWidth 或者 offsetHeight 的话包括边框
var winWW = document.body.scrollWidth || document.documentElement.scrollWidth  // 整个⽹页的宽
var winHH = document.body.scrollHeight || document.documentElement.scrollHeight // 整个⽹页的⾼
var screenH = window.screen.height // 屏幕分辨率的⾼
var screenW = window.screen.width  // 屏幕分辨率的宽
var screenX = window.screenLeft    // 浏览器窗⼝相对于屏幕的x坐标(除了Firefox)
var screenXX = window.screenX      // FireFox相对于屏幕的X坐标
var screenY = window.screenTop    // 浏览器窗⼝相对于屏幕的y坐标(除了Firefox)
var screenYY = window.screenY      // FireFox相对于屏幕的y坐标
2. 获取滚动条距离的兼容性问题
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop // ⽹页被卷去的⾼
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft // ⽹页左卷的距离
3. 获取⾏外样式 currentStyle 和 getComputedStyle 的兼容性问题
function getStyle(el, name){
if(el.currentStyle) {
// IE
return el.currentStyle[name]
} else {
// Chrom, Firefox
return getComputedStyle(el, false)[name]
}
}
4. ⽤ “索引” 获取字符串每⼀项的兼容性问题
var str = 'abcdefg'
alert(str[0])  // 低版本的浏览器IE6, 7不兼容
alert(str.charAt(0))  // 兼容所有浏览器
5. 使⽤ event 对象时的兼容性问题
var e = ev || window.event
alert(e.clientX)
}
6. 阻⽌事件冒泡的兼容性问题
var e = ev || window.event
if (e.stopPropagation) {
e.stopPropagation()    // W3C标准
} else {
e.cancelBubble = true  // IE..
}
}
7. 阻⽌事件默认⾏为的兼容性问题
var e = ev || window.event
if (e.preventDefault) {
e.preventDefault()      // W3C标准
} else {
}
}
8. 获取事件⽬标对象的兼容性问题
var e = ev || window.event
var target = e.target || e.srcElement        // 获取 target 的兼容写法,后⾯的为 IE
var from = e.relatedTarget || e.formElement  // ⿏标来的地⽅,同样后⾯的为 IE...
var to = e.relatedTarget || e.toElement      // ⿏标去的地⽅
}
9. 获取键盘按键码的兼容性问题
var e = ev || window.event
var code = e.keyCode || e.which || e.charCode
console.log(code)
}
10. 设置监听事件的兼容性问题
// 设置监听事件
function addEvent(el, type, fn) {        // 添加事件监听,三个参数分别为对象、事件类型、事件处理函数,默认为 false    if (el.addEventListener) {
el.addEventListener(type, fn, false)    // ⾮IE
} else {
el.attachEvent('on' + type, fn)    // IE,这⾥已经加上on,传参的时候注意不要重复加了
}
}
// 删除事件监听
function removeEvent(el, type, fn) {
if (el.removeEventListener) {
} else {
el.detachEvent('on' + type, fn)    // IE,这⾥已经加上on,传参的时候注意不要重复加了
}
}
11. 获取DOM节点的兼容性问题
// DOM节点相关,主要兼容IE 6 7 8
// 获取下⼀个兄弟节点
function nextnode(el) {
if (el.nextElementSibling) {
ElementSibling  // ⾮IE6 7 8 ⽀持
} else{
Sibling  // IE6 7 8 ⽀持
}
}
// 获取上⼀个兄弟节点
function prenode(el) {
if (el.previousElementSibling) {
return el.previousElementSibling  // ⾮IE6 7 8 ⽀持    } else{
return el.previousSibling    // IE6 7 8 ⽀持
}
}
// 获取第⼀个⼦节点
function firstnode(el) {
if (el.firstElementChild) {
return el.firstElementChild  // ⾮IE6 7 8 ⽀持
} else{
return el.firstChild    // IE6 7 8 ⽀持
}
}
// 获取最后⼀个⼦节点
function lastnode(el) {
if (el.lastElementChild) {
return el.lastElementChild    // ⾮IE6 7 8 ⽀持
} else{
return el.lastChild    // IE6 7 8 ⽀持
}
}
12. 监听⿏标的滑轮滚动事件的兼容性问题

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。