浏览器兼容性调试集锦

最新推荐文章于 2021-01-11 09:54:37 发布

jason-roger

最新推荐文章于 2021-01-11 09:54:37 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发重构兼容性问题文章标签：浏览器兼容性设计技术 css hack

本文链接：https://blog.youkuaiyun.com/dami_deng/article/details/44277207

前端开发同时被 3 个专栏收录

3 篇文章

订阅专栏

重构

2 篇文章

订阅专栏

兼容性问题

2 篇文章

订阅专栏

本文深入探讨了前端开发中浏览器兼容性调试的重要性，详细介绍了使用虚拟机VisualBox作为测试神器，以及如何运用csshack解决不同浏览器对CSS解析差异导致的页面效果不一致问题。通过条件注释法、类内属性前缀法和选择器前缀法，实现了跨浏览器的兼容性调试，并列举了常见兼容性问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于一个前端人员来说,最痛苦的莫过于要求自己的作品在各个浏览器中显示都一致了,但是,从另外一个层面来说,这也是最幸福的事儿,因为在兼容性的调试过程中,可以加深我们对技术的理解和应用.
一般的开发人员可以分为两类,第一类人,他们对自己的要求很严格,每次切完图后,会用用ps进行对比，力求和设计稿相差2px以内，而另外一类人则没有这么要求自己，他们就凭借着自己的肉眼，看个大概就ok了，如果没有一双像素眼的话，往往会导致相差好几个像素。就我个人而言，我比较推崇第一种开发方式，因为这样可以给后期的维护带来很大的方便！
如果要求自己的作品只有2px的差别，那么浏览器兼容性问题将是一个困扰开发人员的大问题了，特别是ie的各个版本，从6一直到11，每一个版本都会给你带来不一样的“惊喜”。废话不多说，进入主题吧！
为了便于大家的理解，我将按照以下几个步骤带领大家认识浏览器兼容性调试

第一步准备一个测试的神器

为了方便开发和测试，有一个好的工具很重要，很多人用ieTester ，就我个人而言，我太喜欢，因为觉得功能不够强大，调试起来不够方便。我强力推荐大家安装一个虚拟机visualBox，这样调试起来比较方便。

第二步认识css hack

不同的浏览器对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器。

css hack 有以下三种实现方式

条件注释法

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 如果IE浏览器版是7,调用ie7.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 如果IE浏览器版本小于等于6,调用ie.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

语法讲解
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思

类内属性前缀法

.bg{
width: 30px;
height: 32px;
background-color:#f1ee18;/*所有浏览器均识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bg"></ div >

这里写图片描述

选择器前缀法

#demo {width:100px;} /*被所有浏览器识别.*/
 - html #demo {width:120px;} /*会被IE6识别,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7识别*/
/*一个用于展示的class为bb的div标签*/
< div class ="demo "></ div >

这里写图片描述

第三步常见兼容性问题

1 不同浏览器的标签默认的margin 和 padding 属性值不同

 解决方案：  `* {margin:0;padding:0;}`

2 不同浏览器的默认字体不同

 解决方案：  `body  {font: normal 12px/1 arial,sans-serif;}`

3 margin加倍问题

 问题说明：在ie6中设置为float的div的margin 会加倍计算

 解决方案：给这个div的css加上display:inline

 <div id=”demo”> 
 #demo {    
     float:left;
     margin:5px;/*IE6下理解为10px*/     
     display:inline;/*IE6下重新理解为5px*/
 }

4 DIV浮动IE6文本产生3象素的bug

 问题说明：左边对象浮动，右边对象内的文本会离左边有3px的间距

 解决方案：

#demo {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        _margin-right:-3px; /* 很关键，可以消除ie6下的3px问题 */
    }
<div id="demo">大米</div><span>3px问题</span>

5 IE6下为什么图片下有空隙产生

问题说明：如下代码在ie6下运行时会出现4px左右的空隙

#all { 
    padding:10px 30px; 
}
#sub { 
    background-color:#F90; 
}

<div id="sub"> 
    <img src="http://photo.l99.com/bigger/03/1359895566588_db3x4f.jpg"/> 
</div>

解决方案1：设置img为“display:block; #sub img {display:block;background-color:#F90;}

解决方案2：设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”