• 前端面试题之——兼容篇


    兼容性面试题

    (一)html 部分
    1.H5 新标签在 IE9 以下的浏览器识别 html5shiv.js 下载地址
    2.ul 标签内外边距问题 ul 标签在 IE6\IE7 中,有个默认的外边距,但是在 IE8 以上及其他浏览器中 有个默认的内边距。解决方法:统一设置 ul 的内外边距为 0
    (二)CSS 样式的兼容性
    1.css 的 hack 问题:主要针对 IE 的不同版本,不同的浏览器的写法不同 IE 的条件注释 hack:

    
    
    
    • 1
    • 2

    2.IE6 双边距问题:IE6 在浮动后,又有横向的 margin,此时,该元素的外边距是其值的 2 倍 解决办法:display:block;
    3.IE6 下图片的下方有空隙 解决方法:给 img 设置 display:block;
    4.IE6 下两个 float 之间会有个 3px 的 bug 解决办法:给右边的元素也设置 float:left;
    5.IE6 下没有 min-width 的概念,其默认的 width 就是 min-width
    6.IE6 下在使用 margin:0 auto;无法使其居中 解决办法:为其父容器设置 text-align:center;
    7.被点击过后的超链接不再具有 hover 和 active 属性 解决办法:按 lvha 的顺序书写 css 样式,
    “:link”: a 标签还未被访问的状态;
    “:visited”: a 标签已被访问过的状态;
    “:hover”: 鼠标悬停在 a 标签上的状态;
    “:active”: a 标签被鼠标按着时的状态;
    8.在使用绝对定位或者相对定位后,IE 中设置 z-index 失效,原因是因为其元素依赖于父元素的 z-index,但是父元素默认为 0, 子高父低,所以不会改变显示的顺序 ;
    9.IE6 下无法设置 1px 的行高,原因是由其默认行高引起的 解决办法:为期设置 overflow:hidden;或者 line-height:1px;
    (三)JavaScript 的兼容性
    1.标准的事件绑定方法函数为 addEventListener,但 IE 下是 attachEvent;
    2.事件的捕获方式不一致,标准浏览器是由外至内,而 IE 是由内到外,但是最后的结果是将 IE 的标 准定为标准
    3.window.event 获取的。并且获取目标元素的方法也不同,标准浏览器是 event.target,而 IE 下 是 event.srcElement
    4.在低版本的 IE 中获取的日期处理函数的值不是与 1900 的差值,但是在高版本的 IE 中和标准浏览 器保持了一致,获取的值也是与 1900 的差值。 比如:var year= new Date().getYear();
    5.ajax 的实现方式不同,这个我所理解的是获取 XMLHttpRequest 的不同,IE 下是activeXObject
    6.IE 中不能操作 tr 的 innerHtml
    7.获得 DOM 节点的父节点、子节点的方式不同 其他浏览器:parentNode parentNode.childNodes IE: parentElement parentElement.childre

  • 相关阅读:
    【SwitchyOmega】SwitchyOmega 安装及使用
    高速数据采集与图像传输对带宽需求的对比分析
    微擎小程序获取不到头像和昵称解决方案
    如何清理废弃pv和其对应的文件夹
    vcpkg安装第三方库,报错fatal error RC1107: invalid usage; use RC /? for Help
    【rabbitmq】搭建rabbitmq启用插件报错
    Mac 安装ZooKeeper+kafka基本使用
    echarts实现折线图点击添加标记
    IB经济与商业可以一起选吗?
    (Nacos)—nacos server集群+docker compose+节点IP问题+多数据库
  • 原文地址:https://blog.csdn.net/HanXiaoXi_yeal/article/details/126159863