一、如何调试 IE 浏览器？
IE调试的一般方法（css）：
-
使用高版本IE控制台（对于IE7以上）
IE11的开发者工具
-
border: 1px solid red;（对于IE6以下没有开发者工具，可以使用此方法。看边界来进行调试，这也是调试的重要手段。border不行就再加上background。） -
outline: 1px solid red;（IE6不支持。） -
javascript: alert (document.get ...) （在IE里面执行JS，在JS里面写样式进行调试。）
调试页面
由于我的jQuery被墙了 ，所以没有看到结果，也是蛮崩溃的。
- 利用远程服务器，连接到有对应版本的机器上进行调试。
-
安装多个虚拟机，每个虚拟机安装不同版本的IE浏览器进行测试。
安装多个XP系统
- 利用一些可以对不同版本进行切换的工具，比如IEtester、SuperPreview、Xenocode Browser Sandbox （可以实现真正的在线测试，但是有的要收费。）
二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
- CSS hack由于不同的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。 - CSS hack分类
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 - 属性前缀法(即类内部Hack)：比如，IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不认识。
- 选择器前缀法(即选择器Hack)：例如 IE6能识别
*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。 - IE条件注释法(即HTML条件注释Hack)：针对所有IE(IE10+已经不再支持条件注释) 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。例如：
只在IE下生效
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
来个截图
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
CSS hack现在用的越来越少，能不用尽量不用，可以用最少的hack去实现多浏览器兼容的页面。所以不需要花很大精力去记，有这个概念，知道一些常见的就行。i知道星号是做ie67的hack，下划线是ie6的hack就行。浏览器越老，bug越多，但是越来越不关注这个了。关于CSS hack，可以直接在browserhacks查询。
条件注释可以参考资料史上最全的CSS hack方式一览和条件注释与CSS hack。
三、列举几种浏览器兼容问题。
下面的测试结果都是在IE7和chrome下测试的，其他版本的IE结果就不贴出来了。
- 透明度opacity
opacity: 0.4;
如果发现样式效果没有出来，先在Can I use上面查一下是否兼容，再搜一下解决方案。
透明度兼容
可以看到在IE8是部分支持。
未解决之前
解决方案：
filter:alpha(opacity=50);
zoom: 1; /* IE7需要加上这句，来触发hasLayout，不然没有效果。*/
解决之后
-
display: inline-block
inline元素的display属性设置为inline-block时，所有的浏览器都支持；
block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。
未解决之前
- 解决方案1：
*display: inline; /* 将块级元素设置为内联对象呈递。*/
*zoom: 1; /* 触发haslayout */
解决之后
- 解决方案2：
先使用display: inline-block;属性触发块级元素，然后再定义display:inline;，让块元素呈递为内联对象。需要注意的是，两个display 要先后放在两个CSS声明中才有效果，顺序也不能反了。
div{
display: inline-block;
}
div{
*display: inline;
}
解决之后
- 块级元素的外边距margin无效
块级元素设置外边距margin无效，行内元素有效果（当然行内元素只有左右的外边距会有效果）。
块级元素设置外边距
行内元素设置外边距
在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸，所以子元素的margin失效。解决方法的思想主要是触发haslayout。 - 解决方案1：
给父元素加overflow: hidden;或者overflow: auto;。
解决之后
-
解决方案2：
解决之后
- 解决方案3：
height: 1%; /* 父元素上面 */
解决之后
- 解决方案4：
zoom: 1; /* 父元素上面 */
解决之后
- margin加倍
给ie6的浮动元素添加margin样式的时候，实际的渲染效果是本身设置的外边距的两倍。解决方案是在这个元素里面加上display: inline;。
这里需要注意的一点是，清除浮动的时候一定要在父元素上加上zoom: 1;，否则没有效果。
ie6margin加倍
不过按道理来说，这个margin加倍的情况应该是左右方向上都有的，不知道为什么这里只有左边方向上有。
解决之后
ie7margin不加倍
ie8margin不加倍
- 文本框不能对齐
当给input输入框设置了高度之后，在IE9以下会出现文本和文本框不能对齐的现象。
未解决之前
解决方案：
在input里面增加vertical-align: middle;。
解决之后
四、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
- 针对兼容问题，首先做个统计，看看使用自己的产品的用户。如果使用IE的比例多（大于5%），可能就要考虑兼容问题。
针对自己的代码，如果效果没有渲染出来，首先看某个元素是否有问题。怎么看呢，在Can I use上面查一下兼容性（当然也可以自己一步步调试代码，一个个删元素，找到问题所在）。如果不兼容，再搜一下解决方案,因为这些版本都比较老了，遇到的问题一般都已经遇到了，一般可以找到解决方案。
还可以参考知乎：怎样可以很好地保证网页的浏览器兼容性。 - 渐进增强与优雅降级
- 渐进增强
开发时先去兼顾，针对某一版本浏览器做开发。开发之后，再对高级浏览器增加一些特别的、额外的一些效果，使得看起来更好看一些，增强用户体验。 - 优雅降级
开发过程中，不用考虑低版本，等开发完成之后，慢慢去作一个适应。只要页面正常，不乱，就可以了，不用追求特别高的还原度。 - 两者的区别
渐进增强是从一个比较基础的，从能够起作用的版本开始，然后再对不断扩充，来达到要求。优雅降级则是从比较复杂的现状开始，把设计对象限定为当前主流的浏览器版本。
五、reset.css和normalize.css分别是做什么的？为什么推荐用nomalize.css?
-
reset.css和normalize.css
在html当中，一些标签会有默认的样式，比如body、ul等会有外边距。reset.css和normalize.css就是去掉默认样式的。当然它们也有区别，normalize.css是一种reset.css的替代方案。
normalize.css的作用有：保护有用的浏览器的一些默认样式，而不是完全重置；修复浏览器自身的一些bug；优化css可用性；解释代码。 - 推荐用
nomalize.css的原因有以下几点： - reset.css比较暴力，它会对所有标签的默认样式重置为一样的效果；而normalize.css比较温和，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式
-
normalize.css对一些浏览器的 bug 进行修复；而reset.css是无法做到的。 -
normalilze.css不会让调试工具变得杂乱；而reset.css在浏览器调试工具中有大段的继承链，显得比较杂乱，难看。
综上所述，多种原因导致推荐使用nomalize.css。
具体的还可以参考来，让我们谈一谈 Normalize.css以及知乎: Normalize.css 与传统的 CSS Reset 有哪些区别。
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？
- IE盒模型设置的width和height不仅仅是指content内容的大小，还包括border边框和padding内边距；而标准盒模型设置的width和height就是content内容的大小。
- 不添加doctype，也就是IE678怪异模式，使用的是IE盒模型；添加doctype，chrome， ie9+, ie678，使用的是标准盒模型。
- box-sizing是定义元素盒尺寸大小的方式。它的属性值可以为content-box、padding-box、border-box、inherit。
box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这就是上面提到的IE盒模型。
其他计算方式的说明以及DEMO可以参考我的另一篇博客盒模型，这里就不再举例了。
七、操作
- virtualbox 安装 xp 虚拟机
mac
windows
在virtualbox安装xp虚拟机
这里是在virtualbox里面安装了三个xp系统，每个系统安装一个IE浏览器，分别为IE678。
一开始我安装的是ghost版本，画面一直卡在那里。下载了好几个文件都是无法安装，折腾了蛮久，可能是ghost版本的很多光盘和iso在虚拟机下会出现一定的兼容性问题的原因。后来到msdn.itellyou.cn上找XP的官方系统安装光盘镜像iso文件下载链接，下载到电脑，设置加载这个iso来进行系统安装。结果成功了，超级兴奋。
在msdn.itellyou.cn上搜索“Windows XP”就可以找到，百度云管家离线下载、迅雷下载、QQ旋风下载，都支持ed2k的下载链接。
安装教程
在安装过程中会要填一个产品密匙，填入“DG8FV-B9TKY-FRT9J-6CRCC-XPQ4G”就可以。
这里的xp默认的是IE6，然后再分别下载IE78到两个xp系统中就可以对IE进行测试啦。
弄好之后如果要实现虚拟机与主机共享粘贴板、拖放，还需安装增强工具包。可以参考如何开启VirtualBox的共享粘贴板功能。 - 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别。
- 盒模型
-
ie6
添加doctype，标准盒模型
不添加doctype，IE盒模型
-
ie7
添加doctype，标准盒模型
不添加doctype，IE盒模型
-
ie8
添加doctype，标准盒模型
不添加doctype，IE盒模型
这里一开始我没有注意，幸亏智远发现了。在上面的截图中，可以看到当IE为IE盒模型的时候，它变成了长方形，高度变高了。因为在盒模型中，撑起高度的就是line-height，所以这里的高度应该就是字体（这里为空白字符）的line-height造成的。经过测试，发现IE678以及11都有这种情况，这应该是IE的一个bug。
IE8截图
解决方案就是把字体设为0px就好啦。
解决之后
-
inline-block
- 块级元素
-
ie6
ie6不识别inline-block
-
ie7
ie7不识别inline-block
-
ie8
ie8识别inline-block
-
行内元素
* ie6
ie6中行内元素支持inline-block
可以看到在ie6中，行内元素可以设置宽高。所以在ie6中，行内元素支持inline-block。
-
ie7
ie7中行内元素支持inline-block
同理，行内元素在ie7中也支持inline-block。
- ie8
ie8中行内元素支持inline-block
在ie8中，行内元素也支持inline-block。
在Can I use中我们也可以看到，IE67是部分支持。
inline-block的兼容性
-
-
max-width
-
ie6
ie6不支持max-width
-
ie7
ie7支持max-width
-
ie8
ie8支持max-width
-
写在后面的话：由于我自己以前没有安装过系统，一开始这里的xp系统安装花了蛮久的时间，打开系统的界面总是卡住，无法安装。差点就要放弃的时候，换了官方系统光盘镜像结果就真的安装好了。看见蓝天白云的那个桌面的时候心里还是很激动的，花了那么久的时间总算是没有白费。
从这件事上，就感悟到一点。没有什么事会难到你无法完成的地步，只要你肯坚持。所以希望自己加油，以后做事也能做到坚持两个字。
网友评论