浏览器兼容

1 . 如何调试 IE 浏览器

• 使用高版本的IE浏览器控制台。
• 如果某个元素不见了，可以使用如下方法：
  a.给该元素加上一个边框border:1px solid color；
  b.给该元素的边框加上一个样式：outline：1px solid color；
• 在网页输入框输入javascript:alert(document.get…)进行调试；

2 . 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 IE 7、IE 8的 hack 方式

• CSS hack：由于各个版本，内核的浏览器对css的支持不一，从而导致在不同浏览器上同一源代码渲染出来的效果不一，我们又需要去兼容它们，所以就出现hack这种方式去做一些兼容，这个过程就称之为CSS hack。
  (hack：一些低版本浏览器兼容性不好，但是浏览器本身存在着一些bug，开发者利用这些bug去写代码来解决浏览器兼容问题的方式叫做hack。)
• 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条件注释：

• IE 6、IE 7的 hack 方式：
  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条件注释法：

其他更多请查阅http://browserhacks.com/

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

• inline-block在ie8以上才得以支持。
• 伪类before和after ie8部分支持，以上支持。
• 伪类link、hover、active和visited使用在非a标签元素上，IE8以下不支持。
• 所有的html5新增语义化标签，对于IE8以下都不支持。
• rgba和opacity设置透明度。IE8以上支持。
• CSS3中新增canvas属性，IE9及以上支持。
• rotate旋转属性。IE浏览器均不支持。
• 更多兼容问题caniuse查询

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

• 兼容多浏览器的看法：
  1.首先看客户需求，分析需求，得出其是否有必要兼容，针对特定浏览器的用户，设计的人员，以及浏览器所占的市场份额。
  2.兼容程度，对于高级的浏览器，我们应该尽可能对页面的内容有高的展示要求，而低版本的浏览器，在能够正常展示的情况下，要求有所降低。
  3.总的来说，需要考虑成本和效益之间的问题。
• 渐进增强：针对低版本的浏览，先实现基本的页面功能，然后针对高版本的浏览器进行添加页面效果和交互等等功能，以达到更好的用户体验。
• 优雅降级：是基于高版本的浏览器实现各种功能之后，然后基于低版本的浏览器无法兼容高版本浏览器的功能，进行逐步的功能和页面效果退化，但在此过程中要保证基本的页面功能。

5 . reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?

• reset.css：各个标签，元素在各浏览器中的默认样式不同，造成它们去渲染相同的源代码渲染出不同的效果，为消除这种效果，reset.css将所有的元素的默认样式清除，再由开发者重新定义。
• normalize.css：normalize,css的理念是尽量保存浏览器的默认样式，而不进行太多的重置，但它所提供的默认样式让各个浏览器保持了高度的一致，相对于传统的reset.css，它是一种新型的，为html5准备的优质替代方案。
• normalize.css的优势：
  1）.保护有用的浏览器默认样式而不是完全去掉它们
  2）.一般化的样式：为大部分HTML元素提供
  3）.修复浏览器自身的bug并保证各浏览器的一致性
  4）.使用一些小技巧优化css的可用性
  5）.解释代码：用注释和详细的文档来

6 . IE盒模型和标准盒模型的区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box 的作用

• IE盒模型和标准盒模型的区别：
  计算元素的宽度上有所不同
  1，IE：宽度=边框+padding+内容
  2，W3C盒模型：宽度=内容宽度
• 通过在整个页面的头部添加，来使 IE7、8使用标准盒模型
• box-sizing:border-box的作用是，在标准盒子模型下，把边框和padding都放进盒子中，相当于在标准盒模型中用IE的盒模型来计算，即一个块级元素实际所占宽高度= 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）

关于操作

1 . virtualbox 安装 xp 虚拟机

mac
windows

2 . 在 IE 7、8 中展示 盒模型、inline-block、max-width的区别

盒模型：在IE6/7/8下使用后，它们都会使用标准的盒模型，不存在兼容性问题。
依然使用这段代码来测试：

.box { 
         width: 100px; 
         height: 100px; 
         margin: 100px; 
         padding: 20px; 
         border: 20px solid blue; 
         background-color: red;
}

IE6：

IE7：

IE8：

inline-block
测试代码：

 
    
 
    

.box { 
        width: 50px; 
        height: 50px; 
        margin: 20px; 
        padding: 2px; 
        border:2px solid blue; 
        background-color: red; 
        display: inline-block;
}

IE6不兼容inline-block，保持为block进行渲染显示

IE7表现结果与IE6相同

IE8下支持inline-block属性

max-width
代码：

##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！##本文版权归多彩和饥人谷所有，转载请注明来源！！！
.box { 
        max-width: 200px; 
        margin: 20px; 
        padding: 2px; 
        border:2px solid blue; 
        background-color: red; 
        display: inline-block;
}

IE6会忽略所设置的最大宽度的值，而自适应宽度

IE7:

IE8支持该属性，会严格遵循这个最大宽度的规定

- 参考

CSS Tools & Techniques
知乎：怎样可以很好地保证网页的浏览器兼容性
让我们谈一谈 Normalize.css
知乎: Normalize.css 与传统的 CSS Reset 有哪些区别