task13.png
1.如何调试 IE 浏览器？
<li>IE7以上可以用开发者工具进行调试，而IE6可以使用加border的方式去调试。
<li>可以采用模拟器的方式去模拟不同版本的IE浏览器。例如：ietester或chrome的付费插件Test IE。
<li>可以采用安装虚拟机的方式，安装不同版本的IE浏览器以达到不同IE浏览器版本的调试目的。
</br>
2什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
CSS hack：由于不同浏览器或者不同浏览器版本的网页解析方式不同，因而导致CSS的输出效果不同，而这个时候就需要CSS hack来解决局部兼容问题，而这个过程就称之为CSS hack。
CSS hack：有三种方法：css属性前缀法、IE条件注释法和选择器前缀法
css属性前缀法：
.box{
color:red;/* for all browsers */
_color:red;/* for ie 6 */
*color:red;/* for ie 6-7 */
color:red\9; /* for ie 6-10 */
}
选择器前缀法：
*body{
/* for ie 6 */
}
*+p{
/* for ie 7 */
@media screen\9{
/* for ie 6-7 */
IE条件注释：
<!--[if IE]>
这段文字只在IE显示
<![endif]-->
<!--[if IE 6]>
这段文字只在IE6显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6或以上版本显示
<![endif]-->
<!--[if lte IE 6]>
这段文字只在IE6或一下版本显示
<![endif]-->
<!--[if !IE]>
这段文字在非IE浏览器上显示
<![endif]-->
<li>ie6 hack
css属性前缀法：
.box{
_color:red;
}
选择器前缀法：
*box{
color:red;
}
IE条件前缀法：
<!--[if IE 6]>
<div class="box">
<![endif]-->
<li>ie 7 hack
选择器前缀法：
*+body{
color:red;
}
IE条件前缀法：
<!--[if IE 7]>
<div class="box">
<![endif]-->
<li>ie6&ie7 hack
css属性前缀法：
.box{
*color:red;
}
选择器前缀法：
@media .box\9{
color:red;
}
IE条件注释法：
<!--[if lte 7]>
<div class="box">
<![endif]-->
3.列举几种浏览器兼容问题?
<li>不同浏览器的标签默认的margin和padding不一，解决方案是*{margin:0 padding:0}
<li>低版本的IE浏览器不兼容inline-block属性
<li>不同浏览器的标签默认的外边距和内边距（margin和padding）不同；
<li>块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；
4. 针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
兼容多浏览器的看法：
<li>首先看客户需求，分析需求，得出其是否有必要兼容，针对特定浏览器的用户，设计的人员，以及浏览器所占的市场份额。
<li>兼容程度，对于高级的浏览器，我们应该尽可能对页面的内容有高的展示要求，而低版本的浏览器，在能够正常展示的情况下，要求有所降低。
<li>总的来说，需要考虑成本和效益之间的问题。
渐进增强：针对低版本的浏览，先实现基本的页面功能，然后针对高版本的浏览器进行添加页面效果和交互等等功能，以达到更好的用户体验。
优雅降级：是基于高版本的浏览器实现各种功能之后，然后基于低版本的浏览器无法兼容高版本浏览器的功能，进行逐步的功能和页面效果退化，但在此过程中要保证基本的页面功能。
5.reset.css和normalize.css分别是做什么的？为什么推荐使nomalize.css?
reset.css的目的是将所有浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
normalize.css是在保持浏览器本身样式的情况下，为不同浏览器提供通用样式的规范，即给定通用的样式，针对不同浏览器出现的兼容性问题分门别类的提供优化方案。
normalize.css的优势：
1.normalize.css是一个现代的，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。
2.normalize.css保存了部分可用的默认样式。
3.normalize修复了一些常见的PC端及移动端的bug，这往往超出了reset的能力范围
借用一位知友的话说就是，reset是革命党，normalize是改良派。reset的方针就是都tm给我脱光光，老子今天要翻牌。什么豹纹，蕾丝，美颜相机统统给我拿掉，老子读书少，都别骗我。于是，一个个屌丝心中的女神都重拾了素颜，但回到本真又能怎样？那两厘米的粉底不都是为了你？于是，在旁边的normalize看不下去了。它主张生活不必处处追求真实，有时应该睁一只眼，闭一只眼。
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？
IE盒子的宽度=padding+margin+content宽度（怪异模式下）
标准盒模型下盒子的宽度=内容宽度
通过添加doctype声明使IE678使用标准盒模型。
当设置了bor-sizing:border-box后,一个块级元素实际所占宽高度= 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
参考：
<a href="http://zehuiguan.github.io/2015/07/16/CSS%20hack%E6%96%B9%E5%BC%8F/">CSS hack方式</a>
<a href="http://blog.csdn.net/freshlover/article/details/12132801">史上最全的CSS hack方式一览</a>
<a href="http://www.cnblogs.com/myitm/archive/2011/05/17/2048850.html">
浏览器兼容问题整理</a>
<a href="https://www.w3ctech.com/topic/1804">normalize.css和reset.css的区别</a>
<a href="http://www.w3cfuns.com/notes/16799/70306b117ceaf74825b5099ac6687a50.html">关于css样式的重置：Reset.css和Normalize.css</a>
版权归饥人谷和饥人谷peter所有，若有转载，请注明来源
感谢吃瓜子观众：
task13 (2).png
网友评论