1、如何调试 IE 浏览器？
- 使用高版本IE控制台，使用开发者工具，选择低版本IE浏览器。（IE7以上）
- 安装虚拟机，在虚拟机中安装IE 浏览器进行调试。
- IE6可以使用tester进行调试。
2、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？ - 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
- 对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
- 1、CSS hack方式一：IE条件注释法
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
2、CSS hack方式二：CSS属性前缀法
-“-″减号是IE6专有的hack
-“\9″ IE6/IE7/IE8/IE9/IE10都生效
-“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
-“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
3、CSS hack方式三：选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
参考
3、列举几种 浏览器兼容问题？
- 不同浏览器的标签默认的margin和padding不同。解决方法：*{margin:0;padding:0;}
- 图片默认有间距。解决办法：使用float属性为img布局
- display:inline-block;IE6 7 不兼容。解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
4、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？ - 兼容、多浏览器覆盖，针对一个项目来说，如果考虑太多浏览器的兼容，是需要花费时间和精力来更新的，如果只有5%的人在用一种浏览器，就不需要兼容，例如淘宝已经不兼容IE6，因为没有很多人在用。所以想达到多浏览器覆盖是不可能的。
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
- 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
参考
5、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css? - reset css的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性；
- normalize.css的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
- 1保护有用的浏览器默认样式而不是完全去掉它们
2一般化的样式：为大部分HTML元素提供
3修复浏览器自身的bug并保证各浏览器的一致性
4优化CSS可用性：用一些小技巧
5解释代码：用注释和详细的文档来
参考
6、在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别?
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.box1{
border: 10px solid ;
background:red;
height:100px;
width:100px;
margin:50px;
padding:50px;
}
.box2>li{
display:inline-block;
}
.box4,.box3{
display:inline-block;
}
.box5{
max-width:300px;
height:100px;
background:pink;
margin:0 auto;
}</style>
</head>
<body>
<div class="box1">盒模型</div>
<div class="box2">
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
</div>
<div class="box3">你好</div>
<div class="box4">前端</div>
<div class="box5">max-width</div>
</body>
IE8
0_1458445817178_8.png
IE7
0_1458445834174_7.png
IE5
0_1458445844470_5.png
网友评论