1.如何调试 IE 浏览器
答：
- 高版本的IE（7以上）存在开发者工具，可以直接使用调试。
- 可以安装虚拟机再安装不同版本的IE去调试
- 在CSS中使用
border: 1px solid red;和outline:1px solid red;显示盒模型调试 - 用IETest调试，模拟不同版本的IE浏览器
2.什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
答：
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
- 条件注释法：在HTML中做更改。
在IE中生效；在IE6生效；
``````在IE7生效； - 属性前缀法(即类内部Hack)： IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
IE6:
.box{
_background:yellow;}```
IE7:
.box{
*background:yellow;}```
- 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
*html .box {
background: yellow;
}```
####3.列举几种 浏览器兼容问题
答：
* ```display:inline-block；``` 对块级元素设置这个属性的时候，IE67是不支持的，需要如下语句:
*display:inline;
*zoom:1;```
-
opacity:0.8;常用CSS3属性调节透明度，这个不被IE8以下支持。所以需要：
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60); /* IE 4-7 */
zoom: 1; ```
####4.针对兼容、多浏览器覆盖有什么看法？**渐进增强**和**优雅降级**是什么意思？
答：一般来讲，如果有超过一定百分比的人数使用某个浏览器，我们在设计页面时候就要考虑到此浏览器的兼容问题。主要就是IE678，火狐和谷歌浏览器。先尽量写代码，如果月到一些问题可以用审查工具去看具体哪有问题，配合CANIUSE的网站查询兼容情况，再酌情进行修改。
* 渐进增强：是指在渲染的时候先以低版本的基础页面为主，保证基本功能，之后再针对高版本浏览器中的功能属性渲染，改进等。
* 优雅降级：与上者刚好相反，是指直接渲染网站所有功能，再对低版本的浏览器进行兼容。
####5.reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
答：
>在HTML标签在浏览器里有默认的样式，在切换页面的时候默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最简单的说法就是把浏览器提供的默认样式覆盖掉,这就是CSS reset。
而相对于resset.css来说，normalize.css更加柔和保留一些比较通用的浏览器默认样式而不是生硬的全部去掉它们，比较讲究通用和可维护性，并且修复了常见的浏览器Bug。所以reset用起来的时候影响的范围很大，后者在Reset 的基础上给一些有特殊意义的标签加上默认样式，所以较为推荐后者。
>1. Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。
####6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？
答：
* IE盒模型写出来的宽高是包括内容content和margin两者的。而这里的content也含有border和padding。
* W3C标准盒模型是写出来的宽高就是内容本身，我们可以在样式里在对Margin，padding，border进行定义。
在IE678中添加DOCTYPE声明即可遵循标准盒模型，添加box-sizing:border-box这个属性即可以按IE盒模型来设定盒子宽高（把边框和内边距放在同一个外边框里）。
####7.在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的区别?
答：
* 盒模型
<style>
.block{
width:100px;
height:100px;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="block"></div>
</body>```
经测试，IE678在盒模型无差异均为下图所示。
IE6，7，8
-
inline-block
在IE67中不支持inline-block，IE8可以。
IE6,7
IE8
- max-width：
<style>
.block1{
max-width:200px;
height:100px;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="block1"></div>
</body>```
***
****本文版权归饥人谷_鬼脚七和饥人谷所有，转载请注明来源。****
网友评论