浏览器兼容

一、如何调试 IE 浏览器

1、在虚拟机内打开旧版浏览器调试效果；
2、使用IEtester/f2etest之类的工具；
a、IE7以上的有开发者工具；
b、IE6对元素加边框以便研究；
c、IE6调试插件

二、什么是CSS hack？

不同的浏览器对css的解析不同，我们必须针对不同的浏览器写不同的css样式，以求兼容。

在 CSS 和 HTML里如何写 hack？各种hack

1. 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"*"和星号" *"，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

2. 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}

3. IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

条件注释.png

为了提高与 HTML5 的可互操作性和兼容性，Internet Explorer 10 标准模式和 Quirks 模式中删除了对条件注释的支持。 这意味着，与在其他浏览器中相同，条件注释将被视作一般注释。 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。 不再支持条件注释

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

圆角
img 边框
双边距
最小高度问题：min-height

四、针对兼容、多浏览器覆盖有什么看法？

渐进增强和优雅降级是什么意思？

优雅降级：暂不考虑低版本，开发完成后，在到别的浏览器测试。
渐进增强：先针对低版本开发，针对高版本增加样式，使画面更好看一点。

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

CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。

Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。

作者：gNahZ tuNlAw
链接：https://www.zhihu.com/question/20094066/answer/25004727
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度
chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度

怪异模式.png

谷歌怪异.png

IE6怪异.png

普通模式代码.png

谷歌普通.png

IE6普通.png

border-box，border和padding计算入width之内

知识点-IE 盒模型 vs 标准盒模型

补充virtualbox 安装 xp 虚拟机
mac
windows
课件
任务
版权归作者及饥人谷所有，转载请注明出处。