第十三弹-浏览器兼容

1.如何调试 IE 浏览器

• IE7以上可以使用浏览器自带的开发者工具，IE6可以使用加边框的直观方式进行调试；
• 使用模拟器模拟不同版本的IE浏览器，如IEtester或者Test IE、Edge自带模拟器等；
• 安装虚拟机，在虚拟机内安装多个系统搭配不同版本IE浏览器来进行调试；

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

CSS hack概念：

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果;

三种表现形式：

• 属性前缀法(即类内部Hack)：
  background:black; /* for all browsers /
  _background:red; / for ie6 */
  background:green; / for ie6~7 /
  background:blue\9; / for ie6~10 */

• 选择器前缀法(即选择器Hack)：
  html .class{}/ for IE6 */
  +html .class{}/ for IE7 */
  :first-child+html .class{}/ for IE7 */

• IE条件注释法(即HTML条件注释Hack)：

   只在IE下生效
   
   只在IE6下生效
   
   只在IE6以上版本生效
   
   非IE浏览器生效
   
  

在 CSS 中 ie6、ie7的 hack 方式：

属性以星号开头，如 *color: red;/* 该属性只在ie6、ie7生效 */;

3.列举几种 浏览器兼容问题

• border-radius:4px；/* ie7以下版本不支持圆角 */
  解决办法：使用JQuery框架集来设置圆角或者圆角图片进行覆盖;
• min-height:200px;/*IE8以下不支持*/
  解决办法：添加"*height：200px；"属性设置；
• display：inline-block;/*IE8以下不支持*/
  解决办法：添加"*display：inline；"属性设置；
• opacity：0.6;/*IE8部分支持，IE8以下不支持*/
  解决办法：添加"filter:alpha(opacity=50); / IE */"属性设置；

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

看法：

• 分析需求，对于上级或客户需求兼容的低版本浏览器需全部兼容；
• 对于低版本只要大局显示不影响，可以不刻意追求美观上样式的一致；
• 分析浏览器占用率，一般低于一定占用率的浏览器可以选择不兼容；
• 总体上，把握时间成本、用户群体、交互效果上进行权衡是否需要兼容对应的浏览器；

渐进增强（progressive enhancement）：

• 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能;
• 从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript，而总是提供一种候补方法，确保用户可以访问（主要的）内容;
• 使用渐进增强时，无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先，只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容，然后再以无侵入（unobtrusive）的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时，它们会自动地呈现出来并发挥作用;

优雅降级（graceful degradation）：

• 一开始就构建站点的完整功能，然后针对浏览器测试和修复;
• 使用优雅降级方案，Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了；
• 使用优雅降级技术时，你必须首先完整的实现了网站，其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效;

参考文档：百度搜索

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

**Reset.css: **
统一各个版本浏览器默认Html标签样式，直接重置所有原浏览器默认样式，再添加统一的标准默认样式；
normalize.css：
统一各个版本浏览器默认Html标签样式，只重置统一浏览器默认样式中有差异的部分样式；

推荐使用Normalize的好处：

• Normalize.css 保护了有价值的默认值；
• Normalize.css 修复了浏览器的bug
• Normalize.css 不会让你的调试工具变的杂乱；
• Normalize.css 是模块化的；
• Normalize.css 拥有详细的文档。

参考文档：Jerry Zou

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

W3C盒模型（标准盒模型）：
chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度，如下图：

IE 盒模型：
ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度，如下图：

使 IE6、7、8使用标准盒模型：

• 添加声明

box-sizing:border-box作用:

• 为元素设定的宽度和高度决定了元素的边框盒。即使盒子模型设定为IE盒模型，设定宽高包含内边距和边框和内容宽度；

7.操作

1. virtualbox 安装 xp 虚拟机:

mac
windows

答：

• 安装了XP及win7的virtualbox，如下图：

  
  
  

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

答：

• 盒模型，IE6、7、8声明 ，运行效果如下图：
  
  
• 盒模型，IE6、7、8未声明 ，运行效果如下图：
  
  

• inline-block在IE8中兼容，IE6、7不兼容，运行效果如下图：

  
  
  

• max-width在IE8中兼容，IE6、7不兼容，运行效果如下图：

  
  
  

　　　　　　　　声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！