如何调试 IE 浏览器
1.IE7+有自带调试工具,早期版本就手动添加边框颜色来观察盒模型吧。
2.采用模拟器,例如IEtester等。
3.安装虚拟机,直接在早期ie上调试。
什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
css hack就是为了解决不同浏览器或不同版本浏览器解析网页结果不同的现象,针对不同浏览器写不同的css代码。
css hack有三种方法:
1.css属性前缀法。
IE6:属性前加下划线或者星号
IE7:星号
IE6~9:末尾加\9
2.选择器注释法:
IE6: *body
IE7: *+body
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
这块其实不很明白。。。。
3.IE条件注释法:
<!--[if IE]>
IE browser best browser 只在IE中生效
<![endif]-->
<!--[if gte IE8]>
IE browser best browser IE8以上版本生效
<![endif]-->
<!--[if !IE]>
IE browser best browser 非IE才生效
<![endif]-->
有关IE6 的 CSS HACK:
body{
_color:red;
};
<!--[if IE6]>
IE browser best browser
<![endif]-->
*body{
color:red;
}
关于IE7:
*+body{
color:red;
}
<!--[if IE7]>
IE browser best browser
<![endif]-->
IE6~7:
.box{
*color:red;
}
<!--[if lte IE7]>
IE browser best browser
<![endif]-->
列举几种 浏览器兼容问题
1.不同浏览器的边距默认样式不同,可以用样式重置解决。
2.一些属性的写法,例如透明度。需要在前面添加对应浏览器的标签。
3.IE早期版本不支持min-height等属性,用css hack。
针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
看用户比例以及权重,多的就支持。
渐进增强和优雅降级是指,一些新的css属性或者js效果在一些浏览器上可能无法实现,所以要保证,在这些特效不能实现的时候,网页仍能正常排版运行。也就是说兼容性要做好。
reset.css和normalize.css分别是做什么的?为什么推荐使用nomalize.css?
reset.css将原有的默认样式全部清除掉。
nomalize.css保留了公认有价值的样式,尽可能的重置使得兼容性增强。
nomalize不是无脑的清除全部样式,他是模块化的并且有文档,起到了兼容的作用还修复了一些bug
IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE:怪异模式,宽度=内容+内边距+边框
标准:宽度=内容
用<!doctype html>可以使IE使用标准盒模型
box-sizing:border-box使元素按照IE盒模型计算
在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别
在网上找了一下测试结果
1.IE6 不支持inline-block max-width
2.IE7不支持inline-block,部分支持max-width
3.IE8都支持