IE兼容

• 如何调试 IE 浏览器
  • 如何在IE浏览器内调试代码

    1. IE8及以上可以使用开发者工具

       
       
       

       console
    2. 在低版本的IE浏览器中可以用border: 1px solid;为调试元素加边框来起到调试的目的
  • 如何测试在IE浏览器中的兼容性

    1. 使用IE Tester模拟IE的环境，可以从IE5到IE11，缺点是不够准确，而且也不能调试JS

       
       
       

       IE TESTER
    2. 使用虚拟机，在虚拟机中安装旧版操作系统和浏览器

       • 自己安装虚拟机

         
         
         

         Vitual Box
       • 对低版本IE有兼容需求的公司会架设远程的虚拟机供员工进行调试

       • 利用高版本IE的文本模式，例如IE8就可以选择IE8的标准模式或者IE7的标准模式

         
         
         

         IE8文本模式
• 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
  • 因为早期不同浏览器的渲染标准不一致，导致同样的CSS语句在不同的浏览器当中有不同的表现，为了解决这些历史遗留下来的问题，就利用浏览器的BUG去解决这些问题，这就叫做CSS hack
  • CSS hack 分类
    1. Property/Value Hacks
       在CSS的属性值前面加入只有低版本的浏览器才认识的符号，例如

    .selector {
        *property: value;
    }
    

    在属性前面加星号在一般浏览器当中不被认可，但是在IE7及以下的版本会认为这是合法的语句，会得到执行

    
    
    

    Property/Value hack
    2. IE CC（Conditional comments）
       在HTML中可以把对低版本IE写的样式添加在IE的条件注释当中，例如

    这样的注释只有在IE中才被认可，在其他浏览器中会被当成一般注释

    
    
    

    IE CC
  • 在IE6、7的hack方式
    1. Prooerty/Vaule hack
       IE<=7

  .selector { !property: value; }
  .selector { $property: value; }
  .selector { &property: value; }
  .selector { *property: value; }
  .selector { )property: value; }
  .selector { =property: value; }
  .selector { %property: value; }
  .selector { +property: value; }
  .selector { @property: value; }
  .selector { ,property: value; }
  .selector { .property: value; }
  .selector { /property: value; }
  .selector { `property: value; }
  .selector { ]property: value; }
  .selector { #property: value; }
  .selector { ~property: value; }
  .selector { ?property: value; }
  .selector { :property: value; }
  .selector { |property: value; }
  

  .selector { property: value !ie; }
  

  IE6-8

  .selector { property: value\9; }
  .selector { property/*\**/: value\9; }
  

    2. Conditional Comments
  

  其中lt、lte、gt、gte分别表示less than、less than equal、greter than、greater than equal
  IE<=7
  IE6
  IE7

• 列举几种浏览器兼容问题
  1. opacity属性在IE8只有部分支持，即可以用filter属性达到同样的效果
     
     

     can i use
     
     在chrome下的表现
     
     

     chrome
     
     在IE11中文档模式下看到的IE8
     
     

     IE8表现
     
     通过查询知道在IE8，可以使用

            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

IE8透明

2. display: inline-block;在IE6、7没有效果

can i use

在chrome的表现

chrome

在IE7的表现

IE7

在IE6、7中只有默认行内元素才可以有 display: inline-block;的效果，可以用以下代码解决

            *display: inline;
            zoom: 1;

实现后的效果

实现display: inline-block;

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

  • 对于浏览器的兼容，首先要做好调研，判断自己的产品到底有没必要对浏览器进行兼容，而且兼容到哪些程度。例如，我的产品受众大部分是年轻人，那么年轻人中可能使用的浏览器版本比较新，那么我就不需要对IE早期的版本进行兼容。判断的方法有多种，可以根据使用百分比判断，例如淘宝，当一个浏览器版本使用人数不足3%的时候，就不进行兼容。还有如果我需要兼容，那么我要兼容到哪个程度，例如兼容需求的等级有A级（意味着对PSD百分百实现，例如Chrome/FF/IE9），B级（功能实现，页面表现差别不大，例如IE8），C级（只要求能实现基本的功能，例如IE7）
  • 渐进增强和优雅降级
    • 逐渐增强的意思是在低版本的浏览器可以实现基本的功能的基础上构建网页，然后在高版本的浏览器实现新的特性来增加更好的用户体验。逐渐增强的思想是内容为主，一个网站的本质是其要所表现的内容
    • 优雅降级的意思是为高版本的浏览器实现新的特性的原则上，在低版本的浏览器牺牲一些用户体验来实现基本的功能。优雅降级的思想是用户体验为主，虽然回退方案可以保证兼容各浏览器，但是并不能保证在低端浏览器的使用体验，只是看起来在各个浏览器的表现一样了

  参考：
  优雅降级和逐渐增强的区别
  怎样可以很好地保证网页的浏览器兼容性？

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

  • 两种方法都是为了使页面在不同的浏览器下的表现一致
    • reset.css是将所有的浏览器自带样式重置掉，用一切归零的方法来实现页面在不同浏览器的表现一致
    • normalize.css的方式不是一棒子打死，而是保留用的默认样式，去掉不需要的样式
  • normalize.css的优点
    

    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和Reset CSS的区别
  来，让我们谈一谈 Normalize.css

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

  • IE盒模型的width=border+padding+content,标准盒模型的width=content;

    
    
    

    盒模型
  • 在html的头部加入DOCTYPE就可以使用IE678的标准模式，标准模式所使用的和模型就是W3C的标准盒模型
  • box-sizing属性是用来改变默认的盒模型宽高的计算方式，可用来模拟那些非正确支持标准盒模型的浏览器的表现，这个属性的值有两个
    

    content-box|border-box

    • content-box，默认的值，作用就是使用W3C标准的盒模型，width=content
    • border-box，这个属性可以是宽高的计算方式变成width=border+padding+content，也就是IE在怪异模式下使用的盒模型

         div {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 50px solid green;
            box-sizing: border-box;
         }

border-box

操作

• virtualbox 安装 xp 虚拟机
  

  

  虚拟机
  
  ![IE6(http://upload-images.jianshu.io/upload_images/2348761-1dc825fc28078fb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别

  • 盒模型

    • IE6

      
      
      

      IE6

    • IE7

      
      
      

      IE7

    • IE8

      
      
      

      IE8
  • inline-block

    • IE6

      
      
      

      IE6

    • IE7

      
      
      

      IE7

    • IE8

      
      
      

      IE8

  测试发现IE6、IE7不支持inline-block

  
  
  

  caniuse
  • max-width

    • IE6

      
      
      

      IE6

    • IE7

      
      
      

      IE7

    • IE8

      
      
      

      IE8

  测试发现在IE6中不支持max-width属性，div的宽度还是被内容所称开

  
  
  

  caniuse