浏览器兼容

2016-08-06 本文已影响26人 ahong_吴

一、如何调试 IE 浏览器

IE7版本以上可以按F12调出开发者工具进行调试。

Paste_Image.png

IE6版本可以使用border: 1px solid red;直接进行调试。
outline: 1px solid red;（ie6不支持）（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
安装虚拟机，运行不同版本的IE来调试。

Paste_Image.png

利用工具在各个版本之间测试，比如IETester,它是一个WebBrowser控件，包含有5.5到11等几个版本的IE浏览器，界面美观。

二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

因为目前所有浏览器并没有统一对CSS的支持，因此会导致不同的浏览器生成的页面效果不一样。这个时候为了我们写的css能够兼容不同的浏览器，就有了css hack。
css hack大致有三种表现形式：css属性前缀法、选择器前缀法、ie条件注释法。
属性前缀法：例如 IE6能识别“下划线”和“星号”，IE7能识别“星号”，但不能识别“下划线”，IE6~IE10都认识“\9”，但firefox前述三个都不能认识。

background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */

**选择器前缀法：

*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */

ie条件注释：针对所有IE(注：IE10+已经不再支持条件注释)：<![endif]-->
在ie6下生效：

<!--[if IE 6]><p>这段文字只在IE6浏览器显示</p><![endif]-->```
在IE6以上版本生效:

```
非ie浏览器生效

<!--[if !IE]><!-->这段文字只在非IE浏览器显示<!--<![endif]-->```
在ie8下生效：

<!--[if IE 8]> 这段文字只在IE6浏览器显示<![endif]-->```

三、列举几种浏览器兼容问题

inline-block属性
在can i use上显示不支持ie6、ie7。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task13</title>
    <style>
      div {
        display: inline-block;
      }
    </style>
  </head>

    <body>
    <div>你好</div>
    <div>饥人谷</div>
  </body>
</html>

inline-block属性在虚拟机ie6下的效果：

Paste_Image.png
解决方法：添加*display:inline，在虚拟机ie6下的效果：

 div {
        display: inline-block;
        *display: inline;           /* 应用hack */
      }

Paste_Image.png

透明度opacity
在can i use 上显示i8以及以下版本都不支持

在ie6下显示:

Paste_Image.png
解决方法：添加filter:alpha(opacity=50);与zoom:1

Paste_Image.png

min-height/width
can i use上显示不支持ie6.

解决办法：

.selector { 
    height:auto !important; /*自适应*/
    height:100px;         /*固定宽度，兼容ie6*/
    min-height:100px;
 }

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

要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果有限还是基本功能有先）
- 成本的角度（有无必要做某件事）
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
- 根据兼容需求选择技术框架、库（jquery）
- 根据兼容需求选择兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
- 条件注释、CSS Hack、js能力检测做一些修补
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级(graceful degradation):一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

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

1.Normalize.css是保留浏览器的原来样式并且做到每个浏览显示一致。
2.CSS Reset相反把浏览器的默认样式都重置了

为什么推荐Normalize.css？

Normalize.css
是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。
我们创造normalize.css有下面这几个目的：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

Normalize.css
支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

工具名词解释

条件注释：在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
IE Hack：针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
js能力检测：浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测
html5shive.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题
respond.js：是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset 去除浏览器默认的CSS样式
normalize.css：可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一
modernizr: 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名
postCSS: 是一个使用JS 插件来转换CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的CSS 语法，内联图片等操作。简而言之，PostCSS 可以将CSS 转变成JavaScript 可以操作的数据格式

六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

IE盒模型和标准盒模型的区别：
IE盒模型:盒子大小是设定的大小加上内外边距和边框
标准盒模型: 盒子的大小就是width和height值

Paste_Image.png

不添加doctype，也就是IE678怪异模式，使用的是IE盒模型；添加doctype，chrome， ie9+, ie678，使用的是标准盒模型。
box-sizing:border-box
是css3属性，就是变成ie盒模型的计算方式，width=border+padding+content，这样就便于计算。