2023年6月21日发(作者：)
浏览器兼容性问题和解决⽅案简述 所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。常见的浏览器内核（渲染引擎） 四种内核： Trident、Gecko、Blink、Webkit浏览器IE浏览器Chrome浏览器Firefox浏览器Safari浏览器Opera浏览器360浏览器猎豹浏览器百度浏览器QQ浏览器内核Trident 内核，也成为 IE 内核Webkit 内核，现在是 Blink 内核Gecko 内核，俗称 Firefox 内核Webkit 内核最初是⾃⼰的 Presto 内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核Trident + Blink 双内核Trident + Blink 双内核Trident 内核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:(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 新增标签问题解决⽅案：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；*height：100px；说明IE6可以识别IE6 / IE7可以识别0/字符9height：100px0/；例⼦height：100px9；IE8可以识别说明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); // Chrometransform: rotate(7deg); //
统⼀标识语句JS兼容性问写法1. 获取⽹页宽和⾼的兼容性问题var winW = Width || Width // ⽹页可见区域宽var winH = Height || Height // ⽹页可见区域宽// 以上为不包括边框的宽⾼，如果是 offsetWidth 或者 offsetHeight 的话包括边框var winWW = Width || Width // 整个⽹页的宽var winHH = Height || Height // 整个⽹页的⾼var screenH = // 屏幕分辨率的⾼var screenW = // 屏幕分辨率的宽var screenX = Left // 浏览器窗⼝相对于屏幕的x坐标（除了Firefox）var screenXX = X // FireFox相对于屏幕的X坐标var screenY = Top // 浏览器窗⼝相对于屏幕的y坐标（除了Firefox）var screenYY = Y // FireFox相对于屏幕的y坐标2. 获取滚动条距离的兼容性问题var scrollTop = Top || Top // ⽹页被卷去的⾼var scrollLeft = Left || Left // ⽹页左卷的距离3. 获取⾏外样式 currentStyle 和 getComputedStyle 的兼容性问题function getStyle(el, name){ if(tStyle) { // IE return tStyle[name] } else { // Chrom, Firefox return getComputedStyle(el, false)[name] }}4. ⽤ “索引” 获取字符串每⼀项的兼容性问题var str = 'abcdefg'alert(str[0]) // 低版本的浏览器IE6, 7不兼容
alert((0)) // 兼容所有浏览器5. 使⽤ event 对象时的兼容性问题k = function(ev) { var e = ev || alert(X)}6. 阻⽌事件冒泡的兼容性问题k = function(ev) { var e = ev || if (opagation) { opagation() // W3C标准 } else { Bubble = true // IE.. }}7. 阻⽌事件默认⾏为的兼容性问题k = function(ev) { var e = ev || if (tDefault) { tDefault() // W3C标准 } else { Value = false // IE.. }}8. 获取事件⽬标对象的兼容性问题k = function(ev) { var e = ev || var target = || ment // 获取 target 的兼容写法，后⾯的为 IE var from = dTarget || ement // ⿏标来的地⽅，同样后⾯的为 IE... var to = dTarget || ent // ⿏标去的地⽅}9. 获取键盘按键码的兼容性问题own = function(ev) { var e = ev || var code = e || || de (code)}10. 设置监听事件的兼容性问题// 设置监听事件function addEvent(el, type, fn) { // 添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false if (ntListener) { ntListener(type, fn, false) // ⾮IE } else { Event('on' + type, fn) // IE,这⾥已经加上on,传参的时候注意不要重复加了 }}// 删除事件监听function removeEvent(el, type, fn) {
if (EventListener) { EventListener(type, fn, false) // ⾮IE } else {
Event('on' + type, fn) // IE,这⾥已经加上on,传参的时候注意不要重复加了 }}11. 获取DOM节点的兼容性问题// DOM节点相关，主要兼容IE 6 7 8// 获取下⼀个兄弟节点function nextnode(el) { if (ementSibling) { return ementSibling // ⾮IE6 7 8 ⽀持 } else{ return bling // IE6 7 8 ⽀持 }}// 获取上⼀个兄弟节点function prenode(el) { if (usElementSibling) { return usElementSibling // ⾮IE6 7 8 ⽀持 } else{ return usSibling // IE6 7 8 ⽀持 }}// 获取第⼀个⼦节点function firstnode(el) { if (lementChild) { return lementChild // ⾮IE6 7 8 ⽀持 } else{ return hild // IE6 7 8 ⽀持 }}// 获取最后⼀个⼦节点function lastnode(el) { if (ementChild) { return ementChild // ⾮IE6 7 8 ⽀持 } else{ return ild // IE6 7 8 ⽀持 }}12. 监听⿏标的滑轮滚动事件的兼容性问题// 给页⾯绑定⿏标滑轮滚动事件var scrollFunc = function(e) { var e = e || if (elta) { // 判断浏览器 IE, Chrome滑轮事件 // 当滑轮向上滚动时 if (elta > 0) { ("滑轮向上滚动") (elta) } // 当滑轮向下滚动时 if (elta < 0) { ("滑轮向下滚动") (elta) } } else if () { // Firefox滑轮事件 // 当滑轮向上滚动时 if (> 0) {
("滑轮向上滚动") () } // 当滑轮向下滚动时 if ( < 0) {
("滑轮向下滚动") () } }}// Firefox 使⽤ DOMMouseScroll 绑定滑轮事件if(ntListener) { ntListener('DOMMouseScroll', scrollFunc, false)}// W3C标准 IE/Opera/Chrome
ewheel = ewheel = scrollFunc
2023年6月21日发(作者：)
浏览器兼容性问题和解决⽅案简述 所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。常见的浏览器内核（渲染引擎） 四种内核： Trident、Gecko、Blink、Webkit浏览器IE浏览器Chrome浏览器Firefox浏览器Safari浏览器Opera浏览器360浏览器猎豹浏览器百度浏览器QQ浏览器内核Trident 内核，也成为 IE 内核Webkit 内核，现在是 Blink 内核Gecko 内核，俗称 Firefox 内核Webkit 内核最初是⾃⼰的 Presto 内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核Trident + Blink 双内核Trident + Blink 双内核Trident 内核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:(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 新增标签问题解决⽅案：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；*height：100px；说明IE6可以识别IE6 / IE7可以识别0/字符9height：100px0/；例⼦height：100px9；IE8可以识别说明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); // Chrometransform: rotate(7deg); //
统⼀标识语句JS兼容性问写法1. 获取⽹页宽和⾼的兼容性问题var winW = Width || Width // ⽹页可见区域宽var winH = Height || Height // ⽹页可见区域宽// 以上为不包括边框的宽⾼，如果是 offsetWidth 或者 offsetHeight 的话包括边框var winWW = Width || Width // 整个⽹页的宽var winHH = Height || Height // 整个⽹页的⾼var screenH = // 屏幕分辨率的⾼var screenW = // 屏幕分辨率的宽var screenX = Left // 浏览器窗⼝相对于屏幕的x坐标（除了Firefox）var screenXX = X // FireFox相对于屏幕的X坐标var screenY = Top // 浏览器窗⼝相对于屏幕的y坐标（除了Firefox）var screenYY = Y // FireFox相对于屏幕的y坐标2. 获取滚动条距离的兼容性问题var scrollTop = Top || Top // ⽹页被卷去的⾼var scrollLeft = Left || Left // ⽹页左卷的距离3. 获取⾏外样式 currentStyle 和 getComputedStyle 的兼容性问题function getStyle(el, name){ if(tStyle) { // IE return tStyle[name] } else { // Chrom, Firefox return getComputedStyle(el, false)[name] }}4. ⽤ “索引” 获取字符串每⼀项的兼容性问题var str = 'abcdefg'alert(str[0]) // 低版本的浏览器IE6, 7不兼容
alert((0)) // 兼容所有浏览器5. 使⽤ event 对象时的兼容性问题k = function(ev) { var e = ev || alert(X)}6. 阻⽌事件冒泡的兼容性问题k = function(ev) { var e = ev || if (opagation) { opagation() // W3C标准 } else { Bubble = true // IE.. }}7. 阻⽌事件默认⾏为的兼容性问题k = function(ev) { var e = ev || if (tDefault) { tDefault() // W3C标准 } else { Value = false // IE.. }}8. 获取事件⽬标对象的兼容性问题k = function(ev) { var e = ev || var target = || ment // 获取 target 的兼容写法，后⾯的为 IE var from = dTarget || ement // ⿏标来的地⽅，同样后⾯的为 IE... var to = dTarget || ent // ⿏标去的地⽅}9. 获取键盘按键码的兼容性问题own = function(ev) { var e = ev || var code = e || || de (code)}10. 设置监听事件的兼容性问题// 设置监听事件function addEvent(el, type, fn) { // 添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false if (ntListener) { ntListener(type, fn, false) // ⾮IE } else { Event('on' + type, fn) // IE,这⾥已经加上on,传参的时候注意不要重复加了 }}// 删除事件监听function removeEvent(el, type, fn) {
if (EventListener) { EventListener(type, fn, false) // ⾮IE } else {
Event('on' + type, fn) // IE,这⾥已经加上on,传参的时候注意不要重复加了 }}11. 获取DOM节点的兼容性问题// DOM节点相关，主要兼容IE 6 7 8// 获取下⼀个兄弟节点function nextnode(el) { if (ementSibling) { return ementSibling // ⾮IE6 7 8 ⽀持 } else{ return bling // IE6 7 8 ⽀持 }}// 获取上⼀个兄弟节点function prenode(el) { if (usElementSibling) { return usElementSibling // ⾮IE6 7 8 ⽀持 } else{ return usSibling // IE6 7 8 ⽀持 }}// 获取第⼀个⼦节点function firstnode(el) { if (lementChild) { return lementChild // ⾮IE6 7 8 ⽀持 } else{ return hild // IE6 7 8 ⽀持 }}// 获取最后⼀个⼦节点function lastnode(el) { if (ementChild) { return ementChild // ⾮IE6 7 8 ⽀持 } else{ return ild // IE6 7 8 ⽀持 }}12. 监听⿏标的滑轮滚动事件的兼容性问题// 给页⾯绑定⿏标滑轮滚动事件var scrollFunc = function(e) { var e = e || if (elta) { // 判断浏览器 IE, Chrome滑轮事件 // 当滑轮向上滚动时 if (elta > 0) { ("滑轮向上滚动") (elta) } // 当滑轮向下滚动时 if (elta < 0) { ("滑轮向下滚动") (elta) } } else if () { // Firefox滑轮事件 // 当滑轮向上滚动时 if (> 0) {
("滑轮向上滚动") () } // 当滑轮向下滚动时 if ( < 0) {
("滑轮向下滚动") () } }}// Firefox 使⽤ DOMMouseScroll 绑定滑轮事件if(ntListener) { ntListener('DOMMouseScroll', scrollFunc, false)}// W3C标准 IE/Opera/Chrome
ewheel = ewheel = scrollFunc
发布评论