IE浏览器相关

一.如何调试IE浏览器？

• 1.IE7及以上可以使用开发者工具，IE6以以下可以通过添加border的方式。

  
  
  

• 2.采用模拟器的方式去模拟不同版本下的IE浏览器，如IE tester.

• 3.安装虚拟机，安装不同版本的IE运行环境去达到调试IE浏览器的目的。

二.什么是css hack？在css和HTML里如何写hack？在css中IE7、IE8的hack方式？

• 解决各浏览器对CSS解析不同所采取的不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。
• css hack 的三种表现方式

• IE条件注释法，IE专有的hack方式（注：IE10+已经不再支持条件注释）。

• 类内属性前缀法，在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。例如:.box{_color:red;} /* for ie6 */
  参考：浏览器识别字符标准对应表
• 选择器前缀法，选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。例如:.selector { -property: value; }
  选择器前缀法参考

• 在css中IE7、IE8的hack方式
  1.选择器前缀法

• IE<=7:

.selector, {}
.selector\ {}
html > /**/ body .selector {}
head ~ /**/ body .selector {}
.selector { property: value !ie; }
.selector { !property: value; }
.selector { $property: value; }
.selector { &property: value; }
.selector { *property: value; }
.selector { )property: value; }
.selector { =property: value; }
.selector { %property: value; }
.selector { +property: value; }
.selector { @property: value; }
.selector { ,property: value; }
.selector { .property: value; }
.selector { /property: value; }
.selector { `property: value; }
.selector { ]property: value; }
.selector { #property: value; }
.selector { ~property: value; }
.selector { ?property: value; }
.selector { :property: value; }
.selector { |property: value; }

• IE=7:

*:first-child+html .selector {}
.selector, x:-IE7 {}
*+html .selector {}
body*.selector {}

• IE<=8:

_::selection, .selector:not([attr*='']) {}
:root .selector {}
body:last-child .selector {}
body:nth-of-type(1) .selector {}
body:first-of-type .selector {}
.selector:not([attr*='']) {}

• IE6-8:

.selector { property: value\9; }
.selector { property/*\**/: value\9; }

2.IE条件注释法
IE7: IE8:
IE>=7: ``

三.列举几种浏览器兼容问题？

1.不同浏览器默认标签的margin和padding不一样，采用*{margin:0;padding:0}解决。
2.IE6、IE7不支持display:inline-block;。

兼容的办法：

div{
display:inline-block;
*display:inline;
*zoom:1;
}

3.透明度（opacity）：IE6/7/8不支持。

兼容的办法： .opacity{ filter:alpha(opacity=50);}

四.针对兼容、多浏览器覆盖有什么看法？“渐进增强”和“优雅降级”是什么意思?

• 看法：针对兼容，应该根据实际情况而定。首先针对是否需要兼容和兼容到什么程度（好看好用、好用不好看、好看可以用），应提前做好调研。一般来说，一个浏览器的用户量小于5%，是可以考虑不做兼容的，为了小用户量使用的浏览器而特地花费了大量的时间与精力来做兼容，是不可取的。这些用户可以建议他们升级浏览器。
• 渐进增强：先制作满足所有浏览器的版本，然后在针对特定的浏览器用一些属性来增强用户的体验。
• 优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。

五.reset.css和normalize.css分别是做什么的？为什么推荐使用normalize.css？

• reset.css是通过重新定义标签样式，把浏览器的默认样式覆盖掉，来实现页面在不同浏览器表现效果一样。
• normalize.css是 reset.css的替代方案，它不像 reset.css那么粗暴，认为所有的默认样式都是不好的，而是保留有用的默认样式，重置那些不需要的默认样式。
• normalize.css与 reset.css的区别：
  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的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
   这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
   来，让我们谈一谈 Normalize.css

六.IE盒模型和标准盒模型有什么区别？怎样使IE7、IE8使用标准盒模型？box-sizing：border-box有什么作用？

• IE盒模型和标准盒模型的区别在于width代表的是什么。如下图所示，IE盒模型的width表示的是：content+padding+border，而标准盒模型的width表示的只是content。
  

  

• 只需在IE7.8的html中添加doctype，表现出来的就是标准盒模型。

• box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。

• 属性：
  • content-box默认值，标准盒子模型。width 与height只包括内容的宽和高；
  • border-box ，width 和 height属性包括内容，内边距和边框，但不包括外边距，相当于怪异盒模型。例如：