1 . 如何调试 IE 浏览器
- 使用高版本的IE浏览器控制台。
- 如果某个元素不见了，可以使用如下方法：
a.给该元素加上一个边框border:1px solid color；
b.给该元素的边框加上一个样式：outline：1px solid color； - 在网页输入框输入javascript:alert(document.get…)进行调试；
2 . 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 IE 7、IE 8的 hack 方式
-
CSS hack：由于各个版本，内核的浏览器对css的支持不一，从而导致在不同浏览器上同一源代码渲染出来的效果不一，我们又需要去兼容它们，所以就出现hack这种方式去做一些兼容，这个过程就称之为CSS hack。
(hack：一些低版本浏览器兼容性不好，但是浏览器本身存在着一些bug，开发者利用这些bug去写代码来解决浏览器兼容问题的方式叫做hack。) -
hack：有三种写法：css属性前缀法、选择器前缀法和IE条件注释法
css属性前缀法：
.box{
color:red;/* for all browsers */
_color:red;/* for ie 6 */
*color:red;/* for ie 6-7 */
color:red\9; /* for ie 6-10 */
}
选择器前缀法：
*body{
/* for ie 6 */
}
*+p{
/* for ie 7 */
@media screen\9{
/* for ie 6-7 */
IE条件注释：
<!--[if IE]>
这段文字只在IE显示
<![endif]-->
<!--[if IE 6]>
这段文字只在IE6显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6或以上版本显示
<![endif]-->
<!--[if lte IE 6]>
这段文字只在IE6或一下版本显示
<![endif]-->
<!--[if !IE]>
这段文字在非IE浏览器上显示
<![endif]-->
-
IE 6、IE 7的 hack 方式：
ie6 hack
css属性前缀法：
.box{
_color:red;
}
选择器前缀法：
*box{
color:red;
}
IE条件前缀法：
<!--[if IE 6]>
<div class="box">
<![endif]-->
ie 7 hack
选择器前缀法：
*+body{
color:red;
}
IE条件前缀法：
<!--[if IE 7]>
<div class="box">
<![endif]-->
ie6&ie7 hack
css属性前缀法：
.box{
*color:red;
}
选择器前缀法：
@media .box\9{
color:red;
}
IE条件注释法：
<!--[if lte 7]>
<div class="box">
<![endif]-->
其他更多请查阅http://browserhacks.com/
3 . 列举几种 浏览器兼容问题
- inline-block在ie8以上才得以支持。
- 伪类before和after ie8部分支持，以上支持。
- 伪类link、hover、active和visited使用在非a标签元素上，IE8以下不支持。
- 所有的html5新增语义化标签，对于IE8以下都不支持。
- rgba和opacity设置透明度。IE8以上支持。
- CSS3中新增canvas属性，IE9及以上支持。
- rotate旋转属性。IE浏览器均不支持。
- 更多兼容问题caniuse查询
4 . 针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
-
兼容多浏览器的看法：
1.首先看客户需求，分析需求，得出其是否有必要兼容，针对特定浏览器的用户，设计的人员，以及浏览器所占的市场份额。
2.兼容程度，对于高级的浏览器，我们应该尽可能对页面的内容有高的展示要求，而低版本的浏览器，在能够正常展示的情况下，要求有所降低。
3.总的来说，需要考虑成本和效益之间的问题。 - 渐进增强：针对低版本的浏览，先实现基本的页面功能，然后针对高版本的浏览器进行添加页面效果和交互等等功能，以达到更好的用户体验。
- 优雅降级：是基于高版本的浏览器实现各种功能之后，然后基于低版本的浏览器无法兼容高版本浏览器的功能，进行逐步的功能和页面效果退化，但在此过程中要保证基本的页面功能。
5 . reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
- reset.css：各个标签，元素在各浏览器中的默认样式不同，造成它们去渲染相同的源代码渲染出不同的效果，为消除这种效果，reset.css将所有的元素的默认样式清除，再由开发者重新定义。
- normalize.css：normalize,css的理念是尽量保存浏览器的默认样式，而不进行太多的重置，但它所提供的默认样式让各个浏览器保持了高度的一致，相对于传统的reset.css，它是一种新型的，为html5准备的优质替代方案。
-
normalize.css的优势：
1）.保护有用的浏览器默认样式而不是完全去掉它们
2）.一般化的样式：为大部分HTML元素提供
3）.修复浏览器自身的bug并保证各浏览器的一致性
4）.使用一些小技巧优化css的可用性
5）.解释代码：用注释和详细的文档来
6 . IE盒模型和标准盒模型的区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box 的作用
-
IE盒模型和标准盒模型的区别：
计算元素的宽度上有所不同
1，IE：宽度=边框+padding+内容
2，W3C盒模型：宽度=内容宽度 - 通过在整个页面的头部添加<!doctype html>，来使 IE7、8使用标准盒模型
- box-sizing:border-box的作用是，在标准盒子模型下，把边框和padding都放进盒子中，相当于在标准盒模型中用IE的盒模型来计算，即一个块级元素实际所占宽高度= 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
关于操作
1 . virtualbox 安装 xp 虚拟机
2 . 在 IE 7、8 中展示 盒模型、inline-block、max-width的区别
盒模型：在IE6/7/8下使用<!DOCTYPE html>后，它们都会使用标准的盒模型，不存在兼容性问题。
依然使用这段代码来测试：
<div class="box"></div>
.box {
width: 100px;
height: 100px;
margin: 100px;
padding: 20px;
border: 20px solid blue;
background-color: red;
}
IE6：
IE7：
IE8：
inline-block
测试代码：
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box {
width: 50px;
height: 50px;
margin: 20px;
padding: 2px;
border:2px solid blue;
background-color: red;
display: inline-block;
}
IE6不兼容inline-block，保持为block进行渲染显示
IE7表现结果与IE6相同
IE8下支持inline-block属性
max-width
代码：
<div class="box">##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！</div>
.box {
max-width: 200px;
margin: 20px;
padding: 2px;
border:2px solid blue;
background-color: red;
display: inline-block;
}
IE6会忽略所设置的最大宽度的值，而自适应宽度
IE7:
IE8支持该属性，会严格遵循这个最大宽度的规定
- 参考
CSS Tools & Techniques
知乎：怎样可以很好地保证网页的浏览器兼容性
让我们谈一谈 Normalize.css
知乎: Normalize.css 与传统的 CSS Reset 有哪些区别
网友评论