浏览器兼容

一、如何调试 IE 浏览器

• IE7以上版本自带的开发者工具，IE6可以用border的方法；
  例：IE11的开发者工具

1.png

• 采用模拟器的方式去模拟不同版本下的IE浏览器，如ietester；
  例：ietester

2.png

• 通过安装虚拟机的方式，安装不同版本的IE运行环境去达到调试IE浏览器的目的。
  例：用虚拟机安装不同版本浏览器

3.png

高版本IE浏览器的开发者工具很不错，可以选择不同版本模式进行调试；ietester可以创建不同版本的浏览器，但感觉不是很好用；个人还是比较喜欢用虚拟机安装不同版本浏览器的方式，感觉更真实。

二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

• 什么是CSS hack

  由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11，Firefox，Safari，Opera，Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

• CSS hack的原理

  由于不同浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

• 在 CSS 和 HTML里如何写 hack

  CSS hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

  • 属性前缀法（即内部Hack）：

    在CSS样式属性名前加上只有特定浏览器在能识别的hack前缀，以达到预期的页面展现效果。

      .container{
          _color: red;/*IE6识别*/
          *color: red;/*IE6,IE7识别*/
          color: red\9;/*IE6-IE10识别*/
          color: red\0;/*IE8-IE10识别*/
          color: red\9\0;/*IE9,IE10识别*/
      }
    

  • 选择器前缀法（即选择器hack）：

    针对一些页面不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

      *html{}/*只对IE6生效*/
      *+html{}/*只对IE7生效*/
    

  • IE条件注释法（即HTML条件注释hack）：（注：IE10+已经不再支持条件注释）这类hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

    只在IE下生效

    只在IE6以上版本生效

    只在IE6以下版本生效

    只在IE8上不生效

    非IE浏览器生效

• 在 CSS 中 ie6、ie7的 hack 方式

  • IE6

    • 属性前缀法：

        .box{
            _color: red;/*for IE6*/
        }
      

    • 选择器前缀法：

        *body{}/*for IE6*/
      

    • 条件注释法：

  • IE7

    • 选择器前缀法：

        *+body{}/*for IE7*/
      

    • 条件注释法：

  • IE6~IE7

    • 属性前缀法：

        .box{
            *color: red;/*for IE6~7*/
        }
      

    • 选择器前缀法：

        @media screen\9{...}
      

    • 条件注释法：

参考：
史上最全的CSS hack方式一览
Browserhacks

三、列举几种浏览器兼容问题

1. 不同浏览器的默认标签的margin和padding不同
   解决办法：

    *{margin: 0; padding: 0;}
   

   备注：这是最常见的也是最易解决的一个浏览器兼容性问题。

2. 块级元素设置float后，又有左右margin的情况下，IE6显示的margin比设置的大
   解决办法：在float的标签样式中加入display: inline;将其转化为行内元素
   备注：我们最常用的就是div+css布局了，而div就是一个典型的块级元素，横向布局时我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

3. 设置较小高度的标签（一般小于10px），在IE6、IE7中高度超出自己设置的高度
   解决办法：给超出高度的标签设置overflow: hidden;或者设置行高line-height小于设置的高度
   备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

4. 行内元素，设置display: block;后采用float布局，又有左右margin的情况，IE6显示的margin比设置的大
   解决办法：在display: block;后面加入display: inline; display: table;
   备注：行内元素，为了设置宽高，我们需要设置display: block;（除了input标签比较特殊）。在float布局并有横向的margin后，在IE6下，它就具有了块级元素float后的横向margin的bug。不过因为它本身就是行内元素，所以我们再加上display: inline;的话，它的高度就不可设了。这时候我们还需要在display: inline;后面加入display: table;

5. 图片默认有间距：几个img标签放在一起时，有些浏览器会有默认的间距，加了margin:0; padding:0;也不起作用
   解决办法：使用float属性为img布局
   备注：因为img标签是行内标签，所以只要不超出容器宽度，img标签都会排在一行，但是部分浏览器的img标签之间会个间距。

6. 标签设置min-height不兼容
   解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto!important; height:200px; overflow:visible;}
   备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时，容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时我们就会面临这个兼容性问题。

7. 透明度的问题
   解决办法：

    selector{
        filter: alpha(opacity=50);/*for IE*/
        -moz-opacity: 0.5;/*for old versions of the Mozilla browsers*/
        -khtml-opacity: 0.5;  /* for old versions of Safari*/
        opacity: 0.5;
    }
   

四、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？

• 对兼容、多浏览器覆盖的看法：
  首先要针对项目本身进行调研，查看目标人群使用的浏览器情况，一般情况对于使用人群小于5%的就可以忽略了，因为所谓的兼容和覆盖全部浏览器这本身就是不现实的，而且涉及到时间和成本的问题，还有一些暂时无法解决的兼容性bug等，这些都需要综合考虑。
• 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
• 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
  参考
  知乎：怎样可以很好地保证网页的浏览器兼容性

五、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?

• reset.css是通过重新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性。相对暴力
  normalize.css是reset.css的替代方案，保留有用的浏览器默认样式，重置掉该重置的样式，同时进行一些bug的修复。相对平和

  引用知乎上的回答：

CSS Reset是革命党，CSS Reset里最激进那一派提倡不管你小子有没有用，通通给我脱了那身衣服，凭什么你body出生就穿一圈margin，凭什么你姓h的比别人吃得胖，凭什么你ul戴一胳膊珠子。于是*{margin:0;}等等运动，全把人家拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家过都扔炉子里烧了，自己看着办吧。
Normalize.css是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们指定个规范，确保他们在任何浏览器里都干好自己的活儿。

知乎: Normalize.css 与传统的 CSS Reset 有哪些区别

• Normalize vs Reset
  1. Normalize.css保护了有价值的默认值
     Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  2. Normalize.css修复了浏览器的bug
     它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9总SVG的溢出、许多出现在各浏览器和操作系统中的表单相关的bug。
  3. Normalize.css不会让你的调试工具变得杂乱
     使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。
  4. Normalize.css是模块化的
     这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用的部分（比如表单的一般化）。
  5. Normalize.css拥有详细的文档
     Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
     这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

让我们谈一谈 Normalize.css

六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

• IE盒模型和标准盒模型的区别
  IE盒模型：宽度（width）=边框（border）+内边距（padding）+内容宽度（content）
  标准盒模型：宽度（width）=内容宽度（content）
• 怎样使IE678使用标准盒模型
  IE不添加doctype时（怪异模式）使用的是IE盒模型，要想使IE678使用标准盒模型，给IE678添加doctype即可。
• box-sizing: border-box;是CSS3新增属性，设置此属性之后，相当于以怪异模式解析。
  通常一个块级元素实际所占宽高度=外边距（margin）+边框（border）+内边距（padding）+宽/高度（width/height）
  如果设置了box-sizing: border-box;，实际所占宽高度=宽高度（width/height）+外边距（margin）
  如图所示：

4.png

操作

1. virtualbox 安装 xp 虚拟机

5.png

用Virtualbox虚拟机安装Windows XP/7、Win7系统详细图文教程

网上下载的很多XP系统都是默认的IE8浏览器，而且没法卸载，安装纯净版的XP系统就可以很方便的卸载IE8还原到IE6。
系统之家 GHOST XP SP3 纯净版 V2014.12

xp怎样把ie8变回ie6？

VirtualBox启动虚拟机报错0x80004005

虚拟机与主机共享粘贴板、拖放，还需安装增强工具包
如何为VirtualBox安装 Guest Additions/增强工具包/功能增强包/增强功能包

2. IE盒模型

代码如下：

6.png

下面通过设置固定宽高，改变marging、padding、border来展示IE盒模型：

7.png

8.png

9.png

10.png

3. inline-block

代码如下：

• IE8
  IE8支持inline-block

11.png

但是IE8兼容性视图中，对块级元素设置`inline-block`不起作用，如图所示：

12.png

• IE7
  IE7也是块级元素不支持inline-block,行内元素支持，如图：

13.png

• IE6
  IE6也是块级元素不支持inline-block,行内元素支持

14.png

4. max-width

代码如下：

    

    
    
max
    max
    max

• IE8
  IE8中块级元素不支持max-width，浏览器自动将max-width解析为width。设置了inline-block的元素支持max-width

15.png

• IE7
  IE7中块级元素不支持max-width，浏览器自动将max-width解析为width。设置了inline-block的行内元素支持max-width

16.png

• IE6
  IE6中块级元素不支持max-width,浏览器并未将max-width解析为width。设置了inline-block的行内元素支持max-width

17.png

---

本文版权属吴天乔所有，转载务必注明出处。