第十三弹-浏览器兼容
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下生效 <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css"> <![endif]--> 只在IE6下生效 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css"> <![endif]--> 只在IE6以上版本生效 <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]--> 非IE浏览器生效 <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
在 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使用标准盒模型：
- 添加声明
<!DOCTYPE html>
box-sizing:border-box作用:
- 为元素设定的宽度和高度决定了元素的边框盒。即使盒子模型设定为IE盒模型，设定宽高包含内边距和边框和内容宽度；
7.操作
1. virtualbox 安装 xp 虚拟机:
答：
-
安装了XP及win7的virtualbox，如下图：
2. 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别？
答：
- 盒模型，IE6、7、8声明
<!Doctype html>，运行效果如下图：
- 盒模型，IE6、7、8未声明
<!Doctype html>，运行效果如下图：
-
inline-block在IE8中兼容，IE6、7不兼容，运行效果如下图：
-
max-width在IE8中兼容，IE6、7不兼容，运行效果如下图：
声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！
