浏览器兼容性问题和解决方案
简述
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。
常见的浏览器内核(渲染引擎)
四种内核: 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="https://cdn.bootcss.com/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可以识别 |
\9 | height: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. 获取网页宽和高的兼容性问题
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) {// IEreturn el.currentStyle[name]} else {// Chrom, Firefoxreturn getComputedStyle(el, false)[name]}
}
4. 用 “索引” 获取字符串每一项的兼容性问题
var str = 'abcdefg'alert(str[0]) // 低版本的浏览器IE6, 7不兼容alert(str.charAt(0)) // 兼容所有浏览器
5. 使用 event 对象时的兼容性问题
document.oncilck = function(ev) {var e = ev || window.eventalert(e.clientX)
}
6. 阻止事件冒泡的兼容性问题
document.oncilck = function(ev) {var e = ev || window.eventif (e.stopPropagation) {e.stopPropagation() // W3C标准} else {e.cancelBubble = true // IE..}
}
7. 阻止事件默认行为的兼容性问题
document.oncilck = function(ev) {var e = ev || window.eventif (e.preventDefault) {e.preventDefault() // W3C标准} else {e.returnValue = false // IE..}
}
8. 获取事件目标对象的兼容性问题
document.oncilck = function(ev) {var e = ev || window.eventvar target = e.target || e.srcElement // 获取 target 的兼容写法,后面的为 IEvar from = e.relatedTarget || e.formElement // 鼠标来的地方,同样后面的为 IE...var to = e.relatedTarget || e.toElement // 鼠标去的地方
}
9. 获取键盘按键码的兼容性问题
document.onkeydown = function(ev) {var e = ev || window.eventvar code = e.keyCode || e.which || e.charCodeconsole.log(code)
}
10. 设置监听事件的兼容性问题
// 设置监听事件
function addEvent(el, type, fn) { // 添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为 falseif (el.addEventListener) {el.addEventListener(type, fn, false) // 非IE} else {el.attachEvent('on' + type, fn) // IE,这里已经加上on,传参的时候注意不要重复加了}
}
// 删除事件监听
function removeEvent(el, type, fn) { if (el.removeEventListener) {el.removeEventListener(type, fn, false) // 非IE} else { el.detachEvent('on' + type, fn) // IE,这里已经加上on,传参的时候注意不要重复加了}
}
11. 获取DOM节点的兼容性问题
// DOM节点相关,主要兼容IE 6 7 8// 获取下一个兄弟节点
function nextnode(el) {if (el.nextElementSibling) {return el.nextElementSibling // 非IE6 7 8 支持} else{return el.nextSibling // 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. 监听鼠标的滑轮滚动事件的兼容性问题
// 给页面绑定鼠标滑轮滚动事件
var scrollFunc = function(e) {var e = e || window.eventif (e.wheelDelta) { // 判断浏览器 IE, Chrome滑轮事件// 当滑轮向上滚动时if (e.wheelDelta > 0) {console.log("滑轮向上滚动")console.log(e.wheelDelta)}// 当滑轮向下滚动时if (e.wheelDelta < 0) {console.log("滑轮向下滚动")console.log(e.wheelDelta)}} else if (e.detail) { // Firefox滑轮事件// 当滑轮向上滚动时if (e.detail> 0) { console.log("滑轮向上滚动")console.log(e.detail)}// 当滑轮向下滚动时if (e.detail < 0) { console.log("滑轮向下滚动")console.log(e.detail)}}
}// Firefox 使用 DOMMouseScroll 绑定滑轮事件
if(document.addEventListener) {document.addEventListener('DOMMouseScroll', scrollFunc, false)
}
// W3C标准 IE/Opera/Chrome
window.onmousewheel = document.onmousewheel = scrollFunc
浏览器兼容性问题和解决方案相关推荐
- html 布局兼容性,HTML+CSS入门 浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门 浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象: ...
- 常见几种浏览器兼容性问题与解决方案
常见几种浏览器兼容性问题与解决方案 参考文章: (1)常见几种浏览器兼容性问题与解决方案 (2)https://www.cnblogs.com/lmaster/p/6385035.html 备忘一下.
- 常见浏览器兼容性问题及解决方案
常见浏览器兼容性问题及解决方案: 1.不同浏览器的默认内外边距和内外补丁不同. 解决方案:css设置 *{margin:0; padding:0;} *是通配符,匹配所有html标签. 2.块级元素f ...
- css 兼容解决方案,css浏览器兼容_CSS浏览器兼容性问题及解决方案
摘要 腾兴网为您分享:CSS浏览器兼容性问题及解决方案,云南移动,优化大师,央视影音,心视界等软件知识,以及赣教云教学通2.0,少儿趣配音,中辉期货,单机,轻笔记,鸿合实物展台,008神器,酷有,电子 ...
- 1.最全整理浏览器兼容性问题与解决方案
常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
- VUE关于hevc编码格式的视频在各端浏览器兼容性问题的解决方案
关于hevc编码格式的视频在各端浏览器兼容性问题的解决方案 1.背景描述 最近开发中遇到了一个视频的兼容问题,同样的都是MP4格式的视频,但是他们编码方式不一样就会导致可能不能正常播放,其根源在于编码 ...
- 常见浏览器兼容性问题和解决方案
持续更新~ 常见的浏览器IE.Firefox.Chrome等主流浏览器兼容性问题和解决方案: 1,各浏览器默认的margin/padding值不同 解决方案:共通css里头部加上 * {margin: ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
- 【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
- 常见浏览器兼容性问题与解决方案
2019独角兽企业重金招聘Python工程师标准>>> 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求 ...
最新文章
- 【Java_多线程并发编程】JUC原子类——4种原子类
- 细说 Lambda 表达式
- Object component的各种标识符
- 计算机函数select,请问关于select函数的操作程序?
- N皇后问题位运算符解法【转载】
- new对象后的代码块(匿名类)
- FigDraw 1. SCI 文章的灵魂 之 简约优雅的图表配色
- 虚拟现实计算机理论文献,虚拟现实在计算机教学中的应用研究
- AR涂涂乐⭐二、 给material赋予材质、移除material、调整扫描框透明度
- 【规划】Motion Planning Approaches 路径规划方法汇总
- 第三方支付(微信支付)支付流程分析
- 《万能数据库查询分析器》创作人之2014年总结
- Classification and inference with machine learning
- 遥感影像 全色 多光谱
- 智慧旅游到全域旅游, 人们“旅游”的目的是什么?
- nn.BatchNorm2d() 手推计算步骤
- 【转发】微博feed系统的推(push)模式和拉(pull)模式和时间分区拉模式架构探讨
- 记录常用的代码工具(二)--Poi工具类
- git 冲突覆盖_git线上线下冲突
- 乐优商城--服务(三) : 商品微服务(LyItemApplication)--前半部分
热门文章
- SolidWorks钣金零件导出dxf排版拉丝方向C#二次开发
- daemontools安装和使用
- 47001 data format error hint -- 解析 JSON/XML 内容错误
- k2p刷机丢失eeprom_刷机经验分享,K2P无线路由器救砖必备,无线和MAC恢复窍门
- X509证书结构解析
- opencv3/C++ 机器学习-EM算法/Expectation Maximization
- 基于UDP广播的局域网匿名聊天APP
- BoundsChecker 使用
- 这游戏全服只有一个玩家,硬是坚挺了18年,官方竟还推新版本?
- phpyun怎么采集_phpyun采集