浏览器兼容

一、如何调试 IE 浏览器？

IE调试的一般方法（css）：

• 使用高版本IE控制台（对于IE7以上）

  
  
  

  IE11的开发者工具
• border: 1px solid red;（对于IE6以下没有开发者工具，可以使用此方法。看边界来进行调试，这也是调试的重要手段。border不行就再加上background。）
• outline: 1px solid red;（IE6不支持。）

• javascript: alert (document.get ...) （在IE里面执行JS，在JS里面写样式进行调试。）

  
  
  

  调试页面
  
  

  由于我的jQuery被墙了 ，所以没有看到结果，也是蛮崩溃的。

• 利用远程服务器，连接到有对应版本的机器上进行调试。

• 安装多个虚拟机，每个虚拟机安装不同版本的IE浏览器进行测试。

  
  
  

  安装多个XP系统
• 利用一些可以对不同版本进行切换的工具，比如IEtester、SuperPreview、Xenocode Browser Sandbox （可以实现真正的在线测试，但是有的要收费。）

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

• CSS hack由于不同的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
  这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
• CSS hack分类
  CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
• 属性前缀法(即类内部Hack)：比如，IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)：针对所有IE(IE10+已经不再支持条件注释) 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。例如：
  只在IE下生效

只在IE6下生效

只在IE6以上版本生效

来个截图

非IE浏览器生效

CSS hack现在用的越来越少，能不用尽量不用，可以用最少的hack去实现多浏览器兼容的页面。所以不需要花很大精力去记，有这个概念，知道一些常见的就行。i知道星号是做ie67的hack，下划线是ie6的hack就行。浏览器越老，bug越多，但是越来越不关注这个了。关于CSS hack，可以直接在browserhacks查询。
条件注释可以参考资料史上最全的CSS hack方式一览和条件注释与CSS hack。

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

下面的测试结果都是在IE7和chrome下测试的，其他版本的IE结果就不贴出来了。

• 透明度opacity

opacity: 0.4;

如果发现样式效果没有出来，先在Can I use上面查一下是否兼容，再搜一下解决方案。

透明度兼容

可以看到在IE8是部分支持。

未解决之前

解决方案：

filter:alpha(opacity=50);
zoom: 1; /* IE7需要加上这句，来触发hasLayout，不然没有效果。*/

解决之后

• display: inline-block
  inline元素的display属性设置为inline-block时，所有的浏览器都支持；
  block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。

  
  
  

  未解决之前
• 解决方案1：

*display: inline; /* 将块级元素设置为内联对象呈递。*/
*zoom: 1;  /* 触发haslayout */

解决之后

• 解决方案2：
  先使用display: inline-block;属性触发块级元素，然后再定义display:inline;，让块元素呈递为内联对象。需要注意的是，两个display 要先后放在两个CSS声明中才有效果，顺序也不能反了。

div{
    display: inline-block;
}
div{
    *display: inline;
}

解决之后

• 块级元素的外边距margin无效
  块级元素设置外边距margin无效，行内元素有效果（当然行内元素只有左右的外边距会有效果）。
  
  

  块级元素设置外边距
  
  
  

  行内元素设置外边距
  
  在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸，所以子元素的margin失效。解决方法的思想主要是触发haslayout。
• 解决方案1：
  给父元素加overflow: hidden;或者overflow: auto;。
  
  

  解决之后

• 解决方案2：

  
  
  

  解决之后
• 解决方案3：

height: 1%; /* 父元素上面 */

解决之后

• 解决方案4：

zoom: 1;  /* 父元素上面 */

解决之后

• margin加倍
  给ie6的浮动元素添加margin样式的时候，实际的渲染效果是本身设置的外边距的两倍。解决方案是在这个元素里面加上display: inline;。
  这里需要注意的一点是，清除浮动的时候一定要在父元素上加上zoom: 1;，否则没有效果。
  
  

  ie6margin加倍
  
  不过按道理来说，这个margin加倍的情况应该是左右方向上都有的，不知道为什么这里只有左边方向上有。
  
  

  解决之后
  
  
  

  ie7margin不加倍
  
  
  

  ie8margin不加倍
• 文本框不能对齐
  当给input输入框设置了高度之后，在IE9以下会出现文本和文本框不能对齐的现象。
  
  

  未解决之前
  
  解决方案：
  在input里面增加vertical-align: middle;。
  
  

  解决之后

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

• 针对兼容问题，首先做个统计，看看使用自己的产品的用户。如果使用IE的比例多（大于5%），可能就要考虑兼容问题。
  针对自己的代码，如果效果没有渲染出来，首先看某个元素是否有问题。怎么看呢，在Can I use上面查一下兼容性（当然也可以自己一步步调试代码，一个个删元素，找到问题所在）。如果不兼容，再搜一下解决方案,因为这些版本都比较老了，遇到的问题一般都已经遇到了，一般可以找到解决方案。
  还可以参考知乎：怎样可以很好地保证网页的浏览器兼容性。
• 渐进增强与优雅降级
• 渐进增强
  开发时先去兼顾，针对某一版本浏览器做开发。开发之后，再对高级浏览器增加一些特别的、额外的一些效果，使得看起来更好看一些，增强用户体验。
• 优雅降级
  开发过程中，不用考虑低版本，等开发完成之后，慢慢去作一个适应。只要页面正常，不乱，就可以了，不用追求特别高的还原度。
• 两者的区别
  渐进增强是从一个比较基础的，从能够起作用的版本开始，然后再对不断扩充，来达到要求。优雅降级则是从比较复杂的现状开始，把设计对象限定为当前主流的浏览器版本。

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

• reset.css和normalize.css
  在html当中，一些标签会有默认的样式，比如body、ul等会有外边距。reset.css和normalize.css就是去掉默认样式的。当然它们也有区别，normalize.css是一种reset.css的替代方案。
  normalize.css的作用有：保护有用的浏览器的一些默认样式，而不是完全重置；修复浏览器自身的一些bug；优化css可用性；解释代码。
• 推荐用nomalize.css的原因有以下几点：
• reset.css比较暴力，它会对所有标签的默认样式重置为一样的效果；而normalize.css比较温和，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式
• normalize.css对一些浏览器的 bug 进行修复；而reset.css是无法做到的。
• normalilze.css不会让调试工具变得杂乱；而reset.css在浏览器调试工具中有大段的继承链，显得比较杂乱，难看。

综上所述，多种原因导致推荐使用nomalize.css。
具体的还可以参考来，让我们谈一谈 Normalize.css以及知乎: Normalize.css 与传统的 CSS Reset 有哪些区别。

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

• IE盒模型设置的width和height不仅仅是指content内容的大小，还包括border边框和padding内边距；而标准盒模型设置的width和height就是content内容的大小。
• 不添加doctype，也就是IE678怪异模式，使用的是IE盒模型；添加doctype，chrome， ie9+, ie678，使用的是标准盒模型。
• box-sizing是定义元素盒尺寸大小的方式。它的属性值可以为content-box、padding-box、border-box、inherit。
  box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这就是上面提到的IE盒模型。
  其他计算方式的说明以及DEMO可以参考我的另一篇博客盒模型，这里就不再举例了。

七、操作

1. virtualbox 安装 xp 虚拟机
   mac
   windows
   
   

   在virtualbox安装xp虚拟机
   
   这里是在virtualbox里面安装了三个xp系统，每个系统安装一个IE浏览器，分别为IE678。
   一开始我安装的是ghost版本，画面一直卡在那里。下载了好几个文件都是无法安装，折腾了蛮久，可能是ghost版本的很多光盘和iso在虚拟机下会出现一定的兼容性问题的原因。后来到msdn.itellyou.cn上找XP的官方系统安装光盘镜像iso文件下载链接，下载到电脑，设置加载这个iso来进行系统安装。结果成功了，超级兴奋。
   在msdn.itellyou.cn上搜索“Windows XP”就可以找到，百度云管家离线下载、迅雷下载、QQ旋风下载，都支持ed2k的下载链接。
   安装教程
   在安装过程中会要填一个产品密匙，填入“DG8FV-B9TKY-FRT9J-6CRCC-XPQ4G”就可以。
   这里的xp默认的是IE6，然后再分别下载IE78到两个xp系统中就可以对IE进行测试啦。
   弄好之后如果要实现虚拟机与主机共享粘贴板、拖放，还需安装增强工具包。可以参考如何开启VirtualBox的共享粘贴板功能。
2. 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别。

• 盒模型

  • ie6

    
    
    

    添加doctype，标准盒模型
    
    
    

    不添加doctype，IE盒模型

  • ie7

    
    
    

    添加doctype，标准盒模型
    
    
    

    不添加doctype，IE盒模型

  • ie8

    
    
    

    添加doctype，标准盒模型
    
    
    

    不添加doctype，IE盒模型
    
    

    这里一开始我没有注意，幸亏智远发现了。在上面的截图中，可以看到当IE为IE盒模型的时候，它变成了长方形，高度变高了。因为在盒模型中，撑起高度的就是line-height，所以这里的高度应该就是字体（这里为空白字符）的line-height造成的。经过测试，发现IE678以及11都有这种情况，这应该是IE的一个bug。

    
    
    

    IE8截图
    
    解决方案就是把字体设为0px就好啦。
    
    

    解决之后

  • inline-block

    • 块级元素

    • ie6

      
      
      

      ie6不识别inline-block

    • ie7

      
      
      

      ie7不识别inline-block

    • ie8

      
      
      

      ie8识别inline-block

  • 行内元素
    * ie6

    
    
    

    ie6中行内元素支持inline-block
    
    

    可以看到在ie6中，行内元素可以设置宽高。所以在ie6中，行内元素支持inline-block。

    • ie7

      
      
      

      ie7中行内元素支持inline-block
      
      

      同理，行内元素在ie7中也支持inline-block。

    • ie8
      
      

      ie8中行内元素支持inline-block
      
      在ie8中，行内元素也支持inline-block。
      在Can I use中我们也可以看到，IE67是部分支持。
      
      

      inline-block的兼容性

  • max-width

  • ie6

    
    
    

    ie6不支持max-width

  • ie7

    
    
    

    ie7支持max-width

  • ie8

    
    
    

    ie8支持max-width

---

写在后面的话：由于我自己以前没有安装过系统，一开始这里的xp系统安装花了蛮久的时间，打开系统的界面总是卡住，无法安装。差点就要放弃的时候，换了官方系统光盘镜像结果就真的安装好了。看见蓝天白云的那个桌面的时候心里还是很激动的，花了那么久的时间总算是没有白费。
从这件事上，就感悟到一点。没有什么事会难到你无法完成的地步，只要你肯坚持。所以希望自己加油，以后做事也能做到坚持两个字。

---