一、如何调试 IE 浏览器
- IE7版本以上可以按F12调出开发者工具进行调试。
Paste_Image.png
- IE6版本可以使用
border: 1px solid red;直接进行调试。 -
outline: 1px solid red;（ie6不支持）（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 - 安装虚拟机，运行不同版本的IE来调试。
Paste_Image.png
- 利用工具在各个版本之间测试，比如
IETester,它是一个WebBrowser控件，包含有5.5到11等几个版本的IE浏览器，界面美观。
二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 因为目前所有浏览器并没有统一对CSS的支持，因此会导致不同的浏览器生成的页面效果不一样。这个时候为了我们写的css能够兼容不同的浏览器，就有了css hack。
- css hack大致有三种表现形式：css属性前缀法、选择器前缀法、ie条件注释法。
- 属性前缀法：例如 IE6能识别“下划线”和“星号”，IE7能识别“星号”，但不能识别“下划线”，IE6~IE10都认识“\9”，但firefox前述三个都不能认识。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
- **选择器前缀法：
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
-
ie条件注释：针对所有IE(注：IE10+已经不再支持条件注释)：<![endif]-->
在ie6下生效：
<!--[if IE 6]><p>这段文字只在IE6浏览器显示</p><![endif]-->```
在IE6以上版本生效:
```
非ie浏览器生效
<!--[if !IE]><!-->这段文字只在非IE浏览器显示<!--<![endif]-->```
在ie8下生效：
<!--[if IE 8]> 这段文字只在IE6浏览器显示<![endif]-->```
三、列举几种浏览器兼容问题
- inline-block属性
在can i use上显示不支持ie6、ie7。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task13</title>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div>你好</div>
<div>饥人谷</div>
</body>
</html>
inline-block属性在虚拟机ie6下的效果：
Paste_Image.png
解决方法：添加
*display:inline，在虚拟机ie6下的效果：
div {
display: inline-block;
*display: inline; /* 应用hack */
}
Paste_Image.png
- 透明度opacity
在can i use 上显示i8以及以下版本都不支持
在ie6下显示:
Paste_Image.png
解决方法：添加
filter:alpha(opacity=50);与zoom:1
Paste_Image.png
- min-height/width
can i use上显示不支持ie6.
解决办法：
.selector {
height:auto !important; /*自适应*/
height:100px; /*固定宽度，兼容ie6*/
min-height:100px;
}
四、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
- 要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果有限还是基本功能有先）
- 成本的角度（有无必要做某件事）
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
-
根据兼容需求选择技术框架、库（jquery）
-
根据兼容需求选择兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
-
条件注释、CSS Hack、js能力检测做一些修补
-
- 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级(graceful degradation):一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
五、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
1.Normalize.css是保留浏览器的原来样式并且做到每个浏览显示一致。
2.CSS Reset相反把浏览器的默认样式都重置了
为什么推荐Normalize.css？
Normalize.css
是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。
我们创造normalize.css有下面这几个目的：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
Normalize.css
支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
工具名词解释
条件注释： 在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
IE Hack： 针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
js能力检测： 浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测
html5shive.js： 用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题
respond.js： 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset 去除浏览器默认的CSS样式
normalize.css： 可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一
modernizr: 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名
postCSS: 是一个使用JS 插件来转换CSS 的工具。 这些插件可以支持使用变量，混入(mixin)，转换未来的CSS 语法，内联图片等操作。 简而言之，PostCSS 可以将CSS 转变成JavaScript 可以操作的数据格式
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
- IE盒模型和标准盒模型的区别：
IE盒模型:盒子大小是设定的大小加上内外边距和边框
标准盒模型: 盒子的大小就是width和height值
Paste_Image.png
- 不添加doctype，也就是IE678怪异模式，使用的是IE盒模型；添加doctype，chrome， ie9+, ie678，使用的是标准盒模型。
- box-sizing:border-box
是css3属性，就是变成ie盒模型的计算方式，width=border+padding+content，这样就便于计算。
操作####
- virtualbox 安装 xp 虚拟机
由于virtualbox安装了总是有问题，无法使用，所有我用了另一个软件。
Paste_Image.png
- 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别
- 盒模型
ie6
Paste_Image.png
ie7
Paste_Image.png
ie8
Paste_Image.png
- inline-block
ie6
Paste_Image.png
ie7
Paste_Image.png
ie8
Paste_Image.png
- max-width
ie6
Paste_Image.png
ie7
Paste_Image.png
ie8
Paste_Image.png
（完）
网友评论