-
如何调试 IE 浏览器
F12调出开发者工具进行调试：
开发者工具
高版本浏览器可以模拟低版本浏览器：
浏览器模拟
但是对于更低版本的IE6和IE7因为不存在开发者工具，建议通过搭建虚拟器进行调试：
通过模拟器对IE进行调试
-
什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
由于不同厂商的浏览器，比如IE，Safari，Chrome等，或是同一浏览器的不同版本，对CSS的解析不同，因此会导致生成的页面效果不同，得不到想要的页面效果，这个时候就要针对不同的浏览器去写不同的CSS，让它同时兼容不同浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单说CSS hack目的就是使CSS代码兼容不同的浏览器。
CSS和HTML中写hack：
CSS hack大致有三种变现形式：CSS属性前缀法，选择器前缀法，以及IE条件注释法。
- 属性前缀法
如，针对IE6的前缀hack：
.main {
_color: black;
-color: black;
}
针对IE7及以下的前缀hack：
.main {
!color: black;
$color: black;
&color: black;
*color: black;
)color: black;
=color: black;
%color: black;
+color: black;
@color: black;
,color: black;
.color: black;
/color: black;
`color: black;
]color: black;
#color: black;
~color: black;
?color: black;
:color: black;
|color: black;
}
针对IE6~8的前缀hack：
.main{
color: black\9;
color/*\**/: black\9;
}
- 选择器前缀法：
* html .selector {}/*针对IE6*/
*+html .selector {}/*针对IE7*/
3.IE条件注释法：
利用低版本IE无法识别注释的特性进行hack：
<!--[if IE 6]>
this is IE 6
<![end if]-->
<!--[if IE 7]>
this is IE 7
<![end if]-->
<!--[if IE 8]>
this is IE 8<br/>
<![end if]-->
<!--[if IE 9]>
this is IE 9<br/>
<![end if]-->
<!--[if !IE]-->
this is a good browser;
<!--<![end if]-->
-
列举几种 浏览器兼容问题
-
display:inline-block的兼容问题
.selector{
display:inline-block;
*display:inline;
*zoom:1;
}
-
min-height兼容问题：
.selector{
min-height:100px;
height:auto !important;
height:100px;
}
- 透明度兼容问题：
.selector{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
-
针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
要对使用人群进行调研，如果一个浏览器的使用人群低于5%则可以忽略该浏览器，因为要在所有浏览器实现同一效果是不现实的，并且针对一些低版本浏览器本身也存在一些无法解决的兼容bug，对于需要过多投入而无法得到相应回报的事情应该放弃。
逐渐增强：对低版本浏览器进行设计，保证功能，然后在针对高浏览器进行效果等改进。
优雅降级：直接对高版本浏览器进行完整功能设计，然后再进行低版本兼容。
-
reset.css和normalize.css分别是做什么的？为什么推荐使用normalize.css?
reset.css是样式重置，以暴力方式覆盖掉浏览器的所有默认样式，以保持浏览器渲染的一致性。
normalize.css则是一冲reset.css的代替方案，注重荣泳方案，重置掉该重置的样式，保留有用的user agent样式，同时进行一些bug修复。
normalize.css的优点：
- 保护有用的浏览器默认样式，而不是完全去掉他们；
- 一般化的样式：为大部分HTML元素提供；
- 修复浏览器自身的bug，并保证个浏览器的一致性；
- 优化CSS可用性；
- 解释代码：用注释和详细的文档。
-
IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE盒模型：宽度=边框+padding+内容宽度：
IE盒模型
标准盒模型：宽度= 内容宽度：
标准盒模型
添加
<!DOCTYPE html>可以让IE678使用标准盒模型。box-sizing:border-box是CSS3新增属性，设置之后相当于以IE6模式解析盒模型
`box-sizing:border-box`
IE6,7,8下的盒模型，display:inline-block,max-width
- 盒模型：
IE678盒模型
改变padding和border之后的盒模型：
IE678盒模型
-
display:inline-block:
在IE8中，支持display:inline-block
IE8
在不添加<!DOCTYPE html>声明时，则不支持display:inline-block:
ie8怪异模式
在IE7中，块级元素不支持display:inline-block,行内元素支持：
ie7
IE6和IE7相同：
IE6
-
max-width：
IE8支持max-width属性：
IE8
IE8在怪异模式下不支持：
IE8怪异模式
IE7支持max-width属性：
IE7
在怪异模式下，IE7同样不支持该属性：
IE7怪异模式
IE6完全不支持该属性：
IE6
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论