日夜谈——浏览器那些事

task13.png

1.如何调试 IE 浏览器？

IE7以上可以用开发者工具进行调试，而IE6可以使用加border的方式去调试。

可以采用模拟器的方式去模拟不同版本的IE浏览器。例如：ietester或chrome的付费插件Test IE。

可以采用安装虚拟机的方式，安装不同版本的IE浏览器以达到不同IE浏览器版本的调试目的。

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条件注释：

ie6 hack

css属性前缀法：
.box{
_color:red;
}
选择器前缀法：
*box{
color:red;
}
IE条件前缀法：

ie 7 hack

选择器前缀法：
*+body{
color:red;
}
IE条件前缀法：

ie6&ie7 hack

css属性前缀法：
.box{
*color:red;
}
选择器前缀法：
@media .box\9{
color:red;
}
IE条件注释法：

3.列举几种浏览器兼容问题?

不同浏览器的标签默认的margin和padding不一，解决方案是*{margin:0 padding:0}

低版本的IE浏览器不兼容inline-block属性

不同浏览器的标签默认的外边距和内边距（margin和padding）不同；

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；

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

兼容多浏览器的看法：

首先看客户需求，分析需求，得出其是否有必要兼容，针对特定浏览器的用户，设计的人员，以及浏览器所占的市场份额。

兼容程度，对于高级的浏览器，我们应该尽可能对页面的内容有高的展示要求，而低版本的浏览器，在能够正常展示的情况下，要求有所降低。

总的来说，需要考虑成本和效益之间的问题。

渐进增强：针对低版本的浏览，先实现基本的页面功能，然后针对高版本的浏览器进行添加页面效果和交互等等功能，以达到更好的用户体验。
优雅降级：是基于高版本的浏览器实现各种功能之后，然后基于低版本的浏览器无法兼容高版本浏览器的功能，进行逐步的功能和页面效果退化，但在此过程中要保证基本的页面功能。

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）

参考：
CSS hack方式
 史上最全的CSS hack方式一览

浏览器兼容问题整理
 normalize.css和reset.css的区别
 关于css样式的重置：Reset.css和Normalize.css

版权归饥人谷和饥人谷peter所有，若有转载，请注明来源

感谢吃瓜子观众：

task13 (2).png