兼容性/css hack/normalize.css

1.如何调试 IE 浏览器

• 使用高版本IE的控制台（IE8+）
• border: 1px solid red; 或outline: 1px solid red;（outline的好处是不占宽度，但有些IE6/7不支持）
• 在浏览器地址栏输入javascript:alert(document.get…)，
  如：javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")

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

不同的浏览器对css的解析方式不一样，会导致页面在不同浏览器下表现不一致，针对不同的浏览器写不同的css样式，使得页面最终在不同浏览器表现大体相同，这就叫css hack。

• css 中写hack的方式：属性加前缀。
  下划线：如.selector { _color: red; } ,IE6能识别，IE7不能识别；
  星号：如 .selector { *color: red; } ,IE6和IE7都能识别；
  \9：如.selector { color: red\9; } ,IE6/7/8都能识别；
• html中写hack:添加条件注释。（IE10开始不支持cc注释了。）
  如：下面的条件注释表示IE8及以下将应用ie8.css样式。

<!--[if lte IE 8]>  
        <link rel="stylesheet" href="ie8.css">
    <![endif]-->

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

• IE6/7只支持inline转换成inline-block，不支持block转换成inline-block
  解决方法：.sellector { display:inline-block; *zoom:1; *display:inline;}

• IE6/7只支持a标签使用hover，不支持其他标签使用hover。

• IE6/7不支持最大最小宽高

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

• 在开发网页的时候，不可能做到所有的浏览器都兼容，而应该根据浏览器市场占有率，兼容主流、淘汰末流。而且并不需要页面在各个浏览器上表现效果都一致，对于高级浏览器功能全开，提供最好的用户体验。对于低级浏览器页面展示效果可以降低标准。
• 渐进增强：先兼容低版本浏览器使其实现基本的功能，再对高级浏览器进行效果、交互等改进和追加功能。
• 优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。

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

两者都是全局样式重置，reset.css相对暴力，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。normalize 相对平和，注重通用的方案，重置掉该重置的样式，保留有用的 浏览器默认样式，同时进行一些 bug 的修复。这点是 reset.css 所缺乏的，也是推荐使用normalize.css的原因。

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

IE盒模型:width=内容宽度+border宽度+两侧内边距宽度；
标准盒模型：width=内容宽度；
box-sizing:border-box，声明盒子遵从IE盒模型规则；

7.在 IE 7、8 中展示 盒模型、inline-block、max-width的区别

代码

• 没写doctype声明的情况下：IE7/8中表现一样，盒模型是IE盒模型，inline-block都不生效，max-width不起作用

  
  

• 写了doctype声明的情况下：盒模型都是按照标准盒模型解析的，inline-block在IE8下有效，在IE7下依然无效，max-width都起作用。

  
  

© 本文归饥人谷和本人所有，如需转载请注明来源。