前端常见的浏览器兼容问题 |
您所在的位置:网站首页 › 浏览器兼容前缀有哪些类型 › 前端常见的浏览器兼容问题 |
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎 所以浏览器兼容性问题一般指:css兼容、js兼容 一、样式初始化由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几个方面。 1.pandding 值和 margin 值均设置为 0将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。 2.html 标签设置统一的字体,如果使用 rem 单位,则 html 需要设置合适的字号。 3.a 标签设置统一的颜色,将 text-decoration 属性设置为 none。 4.ol 和 li 标签list-style 统一设置为 none。 5.input、textarea、select、button 等标签初始化border 设置为 none; 根据需要设置颜色和背景色。 二、使用不同类型的浏览器内核前缀1.Chrome(谷歌浏览器) 与 Safari(苹果浏览器) 内核:Webkit (中译无) 前缀:-webkit- 2.IE (IE浏览器) 内核:Trident (中译三叉戟) 前缀:-ms- 3.Firefox (火狐浏览器) 内核:Gecko(中译壁虎) 前缀:-moz- 4.Opera (欧朋浏览器) 内核:Presto(中译迅速) 前缀:-o- 例: -webkit-border-radius: 10px; /谷歌浏览器/ -ms-border-radius: 10px; /IE浏览器/ -moz-border-radius: 10px; /火狐浏览器/ -o-border-radius: 10px; /欧朋浏览器/ border-radius: 10px; 三、针对IE浏览器不同版本的解决方案 1.对于低版本的 IE 浏览器使用 CSS hack( 即给特点前缀)注:以下符号是写在属性名前面。 兼容 IE6 的 hack 符号:- 或 _ 兼容 IE6 、7 的 hack 符号:` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号 兼容 IE6、7、8 的 hack 符号:. 注:以下符号是写在属性值与分号直接,中间不留空格。 兼容 IE8 的 hack 符号:\0/ 兼容 IE8、9、10 的 hack 符号:\0 兼容 IE6、7、8、9、10 的 hack 符号:\9 例: /hack符号在前/ _border-radius: 10px; /IE6/ +border-radius: 10px; /IE6\7/ .border-radius: 10px; /IE6\7\8/ /hack符号在后/ border-radius: 10px\0/; /IE8/ border-radius: 10px\0; /IE8\9\10/ border-radius: 10px\9; /IE6\7\8\9\10/ 2.为不同的版本编写独立的样式,其他浏览器识别不到。例:大于 IE9 的浏览器使用这个单独的 style9.css 样式 例:只有 IE6 浏览器使用的 style6.css 样式 四、其他特殊样式 1.cursor 属性的 hand 值和 pointer 值问题:firefox 浏览器不支持 hand 值,但其他浏览器均支持 pointer 值。 解决: 统一使用 cursor 属性的 pointer 值。 2.水平居中问题:IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。 解决: 可通过设置父级 text-align:center 实现。 3.属性值 “inherit”问题:IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。 解决:谨慎使用属性值 “inherit”。 五、JS兼容性 1.ES6语法问题:IE11 不支持箭头函数、class 语法等(报 SCRIPT1002: 语法错误),不支持 Set 和 Map 数据结构(不报错)及 Promise 对象,支持 let 和 const,IE10 及以下不支持任何 ES6 语法。 解决:如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。 2.操作 tr 标签问题:IE9 及 IE9 以下版本浏览器,不能操作 tr 标签的 innerHTML 属性。 解决:可以操作 td 标签的 innerHTML 属性。 3.Ajax问题:IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。 解决:在使用 Ajax 请求之前设置 jQuery.support.cors=true。 4.event 对象的 srcElement 属性问题:IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性,没有 target 属性。 解决:obj = event.target?event.target:event.srcElement。 5.DOM 事件绑定问题:IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法,而其他浏览器是 addEventListener() 方法。 解决:判断 IE 浏览器版本,如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一个参数为“onclick” 而不是“click”。并且没有第三个参数。 常见的兼容性问题: 1、不同浏览器的标签默认的外边距( margin )和内边距(padding)不同解决方案: css 里增加通配符 * { margin: 0; padding: 0; } 2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现双边距问题解决方案:设置display:inline; 3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度 4、图片默认有间距解决方案:使用float 为img 布局 5、IE9一下浏览器不能使用opacity解决方案: opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); 6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden; 7、cursor:hand 显示手型在safari 上不支持解决方案:统一使用 cursor:pointer 8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;解决方案:父级元素设置position:relative |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |