阅读 1056

前端大厂面试_2:前端开发浏览器兼容问题HTML兼容、CSS兼容、JavaScript兼容;

现在的市场上有很多种类的浏览器,不同种类的浏览器的内核也不尽相同,所以不同浏览器对代码的解析会存在差异,这就导致对页面渲染效果不统一的问题。

市场上常见的浏览器内核主要有四种:Webkit内核、Presto内核、Trident内核、Gecko内核

image.png

常见的浏览器兼容性可分为三类: ①HTML兼容 ②CSS兼容 ③JavaScript兼容

HTML兼容

html兼容问题涉及到的主要是不同的浏览器能识别的标签不同,有些高级的标签没办法在低级的浏览器中使用,但是我们的常规布局还是以div+css+input为主,这类问题很少会出现

---本文为借鉴网上内容,非纯原创---

Css兼容

1. 浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同

{ 
    margin:0; padding:0; 
}
复制代码

2. 浏览器兼容问题二:IE6下元素浮动之后margin值变成双倍

{
  display: inline;
}
复制代码

3. 浏览器兼容问题三:标签最低高度设置min-height不兼容问题

{
  min-height: 200px;
  height: auto!important;
  height: 200px;
  overflow: visible;
}
复制代码

4. 浏览器兼容问题四:IE6下图片元素img默认有间距

img{
  float:left;
}
复制代码

5. 浏览器兼容问题五:opacity是css3里的属性,只有部分浏览器兼容

{
    //使用各个浏览器的私有属性以支持opacity
  filter: alpha(opacity=50);/*IE*/
  -moz-opacity: 0.5;/*老版Mozilla*/
  -khtml-opacity: 0.5;/*老版Safari*/ 
  opacity: 0.5;
}
复制代码

6. 浏览器兼容问题六:IE6下图片元素img默认有间距

img{
  float:left;
}
复制代码

7. 浏览器兼容问题七:清除浮动

.clearfix::after {
         content: "";
        display: table;
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
复制代码

8.浏览器兼容问题八: 给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大小。

//当前需要解决的div
<div style="margin:1;padding:1;width:10;height:10;"></div>
复制代码
//解决方法
<div style="width:10;height:10;">
    <div style="margin:1;padding:1;"></div>
</div>
复制代码

9. 浏览器兼容问题九:overflow:auto; + position:relative

此bug只出现在IE6和IE7中,有两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative;且高度大于父元素,在IE6-7中子元素不会被隐藏而是溢出。

那就给父元素也设置position:relative;

//当前需要解决的div
<div style="overflow:auto;">
    <div style="position:relative"></div>
</div>
复制代码
//解决方法
<div style="overflow:auto;position:relative">
    <div style="position:relative"></div>
</div>
复制代码

10.IE的图片缩放

描述:图片在IE下缩放有时会影响其质量

解决方案:

img{ -mg-interpolation-mode:bicubic;}
复制代码

11.IE6下png图片的透明bug

描述:使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。

解决方案:

.img{

background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');

_background:0;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');

}

img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}

或

<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />
复制代码

12.<iframe>透明背景bug

描述:在IE浏览器中,<iframe>框架不会自动把背景设为透明

解决方案:

<iframesrc="content.html"allowTransparency="true"></iframe>
复制代码

在iframe调用的content.html页面中设置

body{background-color: transparent;}
复制代码

13.禁用IE默认的垂直滚动条

解决方案:

html{
    overflow:auto;
}
复制代码

14.浮动层的错位

描述:当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

解决方案:

overflow:hidden;
复制代码

15.IE8 以下版本不支持 html5 语义化标签

<!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->
<header>我是header标签, 我应该独占一整行</header>
复制代码

解决方案: html5shiv解决兼容性问题

在head中 引入 html5shiv 插件包即可解决 IE 8 不识别 html5 语义化标签的问题

<script src="html5shiv.js"></script>
复制代码

实际操作:

//在小于等于 IE 8 的浏览器中才会执行, 在IE9 中, 就是普通的注释, 不会解析执行:
<!--[if lte IE 8]>
    <script>
      alert("小于等于IE8都会执行");
    </script>
    <script src="html5shiv.js"></script>
<![endif]-->
//大于 IE 8 的浏览器才执行, 只有 IE 9 认识, 其他浏览器, IE 10 及以上, 都将条件注释当成注释
<!--[if gt IE 8]>
   <script>
      alert("只有IE9才执行这句话");
   </script>
<![endif]-->
复制代码

js兼容

最好的办法:使用jquery跨浏览器!!

此外这里还提供了几种常见的原生js的兼容性问题

1. getElementsByName()

在IE和Opera中, getElementsByName() 方法还会返回那些id为指定值的元素。

2. document.getElementsByClassName(‘类名’)

ie9+支持

3. document.querySelector(‘选择器’);

ie8+支持

4. innerText和 innerHTML

innerHTML是非标准属性(非w3c标准),但是所有的浏览器都支持(关于w3c标准,在其他文章里有提及到)

innerText属性存在兼容性问题,早期的火狐浏览器不支持该属性,使用textContent替代

5. firstElementChild和lastElementChild 获取子元素的第一个节点和最后一个节点

IE9+支持

解决: children(0) 返回第1个

6. addEventListener() IE9以上支持

IE9以下使用attchEvent()代替

7.IE 6、7、8无法获取事件对象的兼容性写法

    box.onclick = function (e) {
            // IE 6\7\8获取事件对象使用window.event
            e = e || window.event;
    }
复制代码

8.阻止事件冒泡

e.stopPropagation()不支持IE 6\7\8

IE8以下使用e.cancelBubble = true;

    if (e && e.stopPropagation) {
	e.stopPropagation
} else {
	window.event.cancelBubble = true;
}
复制代码
文章分类
前端
文章标签