keywords: 兼容性、hack、渐进增强、优雅降级、reset.css、normalize.css、标准盒模型。
-
如何调试 IE 浏览器
1、IE7以上的有开发者工具；
2、IE6对元素加边框以便研究；
3、在虚拟机内打开旧版浏览器调试效果；
4、使用IEtester之类的工具；
-
什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
html中写hack：
只在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]-->
CSS中写hack：
1. IE6能识别下划线"_"和星号" *"，IE7能识别星号" *"，但不能识别下划线"*"，IE6~IE10都认识"\9"
2. IE6 .selector { -property: value; }
IE7 .selector { *property: value; }
IE6-8 .selector { property: value\9; }
参考：
browserhack
CSS hack 与条件注释
-
列举几种 浏览器兼容问题。
1、inline-block
2、border-radius
3、IE6下，除a标签外不能使用hover属性
-
针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
优雅降级 :优先保障现代浏览器的易用性和美观，确保用户体验最好，对于低版本、难兼容的浏览器采取逐渐降低美观度和易用性的手段。
渐进增强 和优雅降级相反，主要在IE6、IE7等旧版浏览器上开发，优先保证旧版浏览器的功能，确保使用低版本浏览器的用户体验，而在现代浏览器上追加效果，提高用户体验。
-
reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
reset.css：简单粗暴地对所有元素重置默认样式，
normalize.css：保留某些有用的默认样式，这些样式确保跨浏览器的一致性，它相当于reset.css的一种替代方案；
与reset.css不同的是，normalize.css有以下优势：
1、保护有用的浏览器默认样式而不是完全去掉它们
2、一般化的样式：为大部分HTML元素提供
3、修复浏览器自身的bug并保证各浏览器的一致性
4、优化CSS可用性：用一些小技巧
5、解释代码：有注释和详细的文档
参考：
来，让我们谈一谈Normalize.css
-
IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE盒模型与标准盒模型对width和height的解释上有明显不同，IE盒模型的width和height是这样的：
IE盒模型.png
而标准盒模型的width是这样的：
W3C盒模型.png
要使IE678使用标准盒模型需要在html的开始位置加上<!doctype html>，否则默认启用怪异模式，使用IE盒模型。
为了对html中元素的width和height在跨浏览器中保持一致性，可以使用css中属性box-sizing:border-box，令所有元素使用IE盒模型。
-
在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别
盒模型区别
inline-blcok区别
max-width区别
网友评论