2023年6月21日发(作者：)
前端⾯试题之解决浏览器兼容性的⽅案浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决⽅法。⼀、样式初始化由于各⼤浏览器会有⾃⾝的默认样式，并且不尽相同，所以为了尽可能的保证样式的统⼀性，前端在开发项⽬之前都会先进⾏样式格式化，最常见的分为以下⼏个⽅⾯。ng 值和 margin 值均设置为 0将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。 标签设置统⼀的字体，如果使⽤ rem 单位，则 html 需要设置合适的字号。3.a 标签设置统⼀的颜⾊，将 text-decoration 属性设置为 none。 和 li 标签list-style 统⼀设置为 none。、textarea、select、button 等标签初始化border 设置为 none；根据需要设置颜⾊和背景⾊。⼆、使⽤不同类型的浏览器内核前缀（⾕歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译⽆） 前缀：- （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-x （⽕狐浏览器） 内核：Gecko（中译壁虎） 前缀：- （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o-例：-webkit-border-radius: 10px; /⾕歌浏览器/-ms-border-radius: 10px; /IE浏览器/-moz-border-radius: 10px; /⽕狐浏览器/-o-border-radius: 10px; /欧朋浏览器/border-radius: 10px;12345三、针对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; /IE67/.border-radius: 10px; /IE678//hack符号在后/border-radius: 10px0/; /IE8/border-radius: 10px0; /IE8910/border-radius: 10px9; /IE678910/1234567892.为不同的版本编写独⽴的样式，其他浏览器识别不到。例：⼤于 IE9 的浏览器使⽤这个单独的 样式123例：只有 IE6 浏览器使⽤的 样式123四、其他特殊样式 属性的 hand 值和 pointer 值问题：firefox 浏览器不⽀持 hand 值，但其他浏览器均⽀持 pointer 值。解决: 统⼀使⽤ cursor 属性的 pointer 值。2.⽔平居中问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现⽔平居中。解决: 可通过设置⽗级 text-align:center 实现。3.属性值 “inherit”问题：IE8 及IE8 以下版本浏览器不⽀持属性值 “inherit”。解决：谨慎使⽤属性值 “inherit”。五、JS兼容性6语法问题：IE11 不⽀持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不⽀持 Set 和 Map 数据结构（不报错）及 Promise 对象，⽀持let 和 const，IE10 及以下不⽀持任何 ES6 语法。解决：如果要兼容IE浏览器的项⽬请使⽤ ES5 语法或者使⽤ Babel 进⾏转换。2.操作 tr 标签问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。解决：可以操作 td 标签的 innerHTML 属性。问题：IE9 及 IE9 以下版本浏览器⽆法使⽤ Ajax 获取接⼝数据。解决：在使⽤ Ajax 请求之前设置 =true。 对象的 srcElement 属性问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。解决：obj = ?:ment。 事件绑定问题：IE8 及 IE8 以下版本浏览器是⽤ attachEvent() ⽅法，⽽其他浏览器是 addEventListener() ⽅法。解决：判断 IE 浏览器版本，如果是 IE8 及以下 事件绑定则使⽤ attachEvent() ⽅法，注意 attachEvent() ⽅法的⽤法，第⼀个参数为“onclick” ⽽不是“click”。并且没有第三个参数。
2023年6月21日发(作者：)
前端⾯试题之解决浏览器兼容性的⽅案浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决⽅法。⼀、样式初始化由于各⼤浏览器会有⾃⾝的默认样式，并且不尽相同，所以为了尽可能的保证样式的统⼀性，前端在开发项⽬之前都会先进⾏样式格式化，最常见的分为以下⼏个⽅⾯。ng 值和 margin 值均设置为 0将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。 标签设置统⼀的字体，如果使⽤ rem 单位，则 html 需要设置合适的字号。3.a 标签设置统⼀的颜⾊，将 text-decoration 属性设置为 none。 和 li 标签list-style 统⼀设置为 none。、textarea、select、button 等标签初始化border 设置为 none；根据需要设置颜⾊和背景⾊。⼆、使⽤不同类型的浏览器内核前缀（⾕歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译⽆） 前缀：- （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-x （⽕狐浏览器） 内核：Gecko（中译壁虎） 前缀：- （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o-例：-webkit-border-radius: 10px; /⾕歌浏览器/-ms-border-radius: 10px; /IE浏览器/-moz-border-radius: 10px; /⽕狐浏览器/-o-border-radius: 10px; /欧朋浏览器/border-radius: 10px;12345三、针对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; /IE67/.border-radius: 10px; /IE678//hack符号在后/border-radius: 10px0/; /IE8/border-radius: 10px0; /IE8910/border-radius: 10px9; /IE678910/1234567892.为不同的版本编写独⽴的样式，其他浏览器识别不到。例：⼤于 IE9 的浏览器使⽤这个单独的 样式123例：只有 IE6 浏览器使⽤的 样式123四、其他特殊样式 属性的 hand 值和 pointer 值问题：firefox 浏览器不⽀持 hand 值，但其他浏览器均⽀持 pointer 值。解决: 统⼀使⽤ cursor 属性的 pointer 值。2.⽔平居中问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现⽔平居中。解决: 可通过设置⽗级 text-align:center 实现。3.属性值 “inherit”问题：IE8 及IE8 以下版本浏览器不⽀持属性值 “inherit”。解决：谨慎使⽤属性值 “inherit”。五、JS兼容性6语法问题：IE11 不⽀持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不⽀持 Set 和 Map 数据结构（不报错）及 Promise 对象，⽀持let 和 const，IE10 及以下不⽀持任何 ES6 语法。解决：如果要兼容IE浏览器的项⽬请使⽤ ES5 语法或者使⽤ Babel 进⾏转换。2.操作 tr 标签问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。解决：可以操作 td 标签的 innerHTML 属性。问题：IE9 及 IE9 以下版本浏览器⽆法使⽤ Ajax 获取接⼝数据。解决：在使⽤ Ajax 请求之前设置 =true。 对象的 srcElement 属性问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。解决：obj = ?:ment。 事件绑定问题：IE8 及 IE8 以下版本浏览器是⽤ attachEvent() ⽅法，⽽其他浏览器是 addEventListener() ⽅法。解决：判断 IE 浏览器版本，如果是 IE8 及以下 事件绑定则使⽤ attachEvent() ⽅法，注意 attachEvent() ⽅法的⽤法，第⼀个参数为“onclick” ⽽不是“click”。并且没有第三个参数。
发布评论