- 如何调试 IE 浏览器
1 安装高版本IE浏览器，如安装的是IE9，则可以直接调试IE9、IE8、IE7
2 IE6需要安装windowsXP虚拟机。
3 IE7以上版本可用自浏览器自带的开发者工具进行调试，IE6可设置border或outline属性调试块元素及盒模型。 - 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
- CSS和HTML写hack的方法：
1 属性前缀法(即类内部Hack)：例如 IE6能识别-,_,*，IE7能识别星号*，但不能识别_,_，IE6~IE10都认识\9，但firefox前述三个都不能认识
p {
-width: 100px;
_width: 100px;
}/*兼容IE6*/
p {
*width: 100px;
}/*兼容IE6 7，可使用的符号有 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
说明：在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
2 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
应用星号HTML hack
#content {
width: 80px;
padding: 10px;
}
* html #content {
width: 100px;
w\idth: 80px;
} /*兼容IE6或更低版本的浏览器*/
应用子选择器hack
html > body {
background-image: url(bg.png);
}/*使用子选择器hack对windows上的IE5和IE6隐藏background-image属性，这个选择器对IE7以下是无效的。*/
3 IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
只在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]-->
| 符号 | 说明 |
|---|---|
| lte： | 就是Less than or equal to的简写，也就是小于或等于的意思。 |
| lt ： | 就是Less than的简写，也就是小于的意思。 |
| gte： | 就是Greater than or equal to的简写，也就是大于或等于的意思。 |
| gt ： | 就是Greater than的简写，也就是大于的意思。 |
| ! ： | 就是不等于的意思，跟javascript里的不等于判断符相同 |
- 在IE6和IE7下的css hack
- HTML hack
<!--[IF IE 6]>
This a Internet Explore 6 browser.
<![ENDIF]-->
<!--[IF IE 7]>
his a Internet Explore 7 browser.
<![ENDIF]-->
IE6 CSS hack:
div.ct{
display:inline-block;
_display:inline;
}
*div.ct{
display:inline;
}
IE7 CSS hack:
div.ct{
display:inline-block;
*display:inline;
}
- 列举几种 浏览器兼容问题
1 不同浏览器之间默认的padding与margin有较大差异，常在CSS里用* {padding：0；margin:0;}解决。
2 双外边距浮动bug- 在IE6和更低版本的浏览器中，这个window bug使任何浮动元素上的外边距加倍。
p {
float: left;
margin-left: 100px;
}
* 解决方法是给元素设置display: inline;属性（行内元素设置display:block;并且设置浮动时用同样方法解决）
3 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度
* 解决方法：设置overflow:hidden
4 几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
* 解决方法：设置浮动，设置负margin属性。
5 标签最低高度设置min-height不兼容
p {
width: 200px;
min-height: 200px;
background: yellow;
}
* 解决方法:在css里写入*height：200px；这样就在IE6 7版本下写死这个高度。
6 各个浏览器透明度的css兼容写法
filter:alpha(opacity=50); /IE,透明度50%/
-moz-opacity:0.5; /Firefox,透明度50%/
opacity:0.5;/其他浏览器,透明度50%/
* 针对兼容、多浏览器覆盖有什么看法？**渐进增强**和**优雅降级**是什么意思？
* 要针对项目本身进行调研，查看目标人群使用的浏览器情况。一般情况对于使用人群小于5%的就可以忽略了，兼容和覆盖全部浏览器这本身就是不现实的，而且涉及到时间和成本的问题，还有一些暂时无法解决的兼容性bug等，这些都需要综合考虑。
* 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
* 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
* reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
* reset.css表示浏览器样式重置。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。
* [Normalize.css](https://github.com/necolas/normalize.css)，它是一个定制的 reset.css 文件，可以让所有元素在所有的现代浏览器上渲染一致。相比其它的 reset.css，Normalize.css 保留有用的默认样式，不像其它 reset.css 那么彻底，移除了每个默认样式，然后又得费神把需要的样式再加回来。Normalize.css 定义绝大多数元素的默认样式，并且还提高了一些元素的可用性，并且代码都有详细的注释。
* Normalize.css支持的浏览器有
>Google Chrome (latest)
Mozilla Firefox (latest)
Mozilla Firefox 4
Opera (latest)
Apple Safari 6+
Internet Explorer 8+
* Normalize.css 使用非常简单，无需下载，只要在网页的头部加入以下代码即可：
<link rel="stylesheet" href="http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css" type="text/css" />
* IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
* IE盒模型：IE早期版本在混杂模式中(不声明!DOCTYPE HTML)使用自己的非标准盒模型。在这些版本中width属性不是内容的宽度，而是内容+内边距+边框的总和宽度。
* 标准盒模型：标准盒模型就是W3C盒模型，width只为内容的宽度。
* 在页面头部添加<!DOCTYPE html>可以使IE使用标准盒模型。
* 为页面所有元素添加样式 box-sizing: border-box; ，使元素的内边距和边框不再会增加它的宽度。
* 下图可以看出div1设置了padding和border值但是宽高与div2一可以看出box-sizing: border-box;的效果。
* 在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的区别
* 盒模型的区别：
* inline-block属性在IE6 IE7 下无效
* max-width属性在IE6下无效
div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
max-width: 50px;
display: inline-block;
}
* 参考
[http://www.teaching-materials.org/csstools/](http://www.teaching-materials.org/csstools/)
[知乎：怎样可以很好地保证网页的浏览器兼容性](https://www.zhihu.com/question/19736007)
[让我们谈一谈 Normalize.css](http://jerryzou.com/posts/aboutNormalizeCss/)
[知乎: Normalize.css 与传统的 CSS Reset 有哪些区别](https://www.zhihu.com/question/20094066)
[常见浏览器兼容于解决方式](http://blog.csdn.net/chuyuqing/article/details/37561313/)
[定义浏览器默认样式](http://blog.wpjam.com/m/normalize-css/)
`本博客版权归 本人和饥人谷所有，转载需说明来源`