任务13-浏览器兼容

作者: 饥人谷_任磊 | 来源:发表于2016-08-10 23:30 被阅读50次

1.如何调试IE浏览器?

对于高版本的IE浏览器（IE7以上）可以使用IE自带的开发者工具，如下图：

IE9开发者工具

使用一些集成IE版本的测试工具，例如SuperPreview、IEtester等，但是模拟的效果有缺陷，不能保证网页运行在真正的IE浏览器上没有问题。
使用虚拟机安装IE浏览器，这种方法是最稳妥的，直接安装你所需要调试的IE浏览器版本。
如下图：

虚拟机IE6浏览器

2.什么是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效果。

CSS Hack大致有3中表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法（即类内部Hack）：例如IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识“\9”,但是firefox前述三个都不能识别。
选择器前缀法（即选择器HACK）：例如IE6能识别html.class{}，IE7能识别+html.class{}或者*。first-child+html.class{}
3 IE条件注释法（即HTML条件注释Hack）：针对所有IE（注：IE10+已经不再支持条件注释）：,针对IE6及以下版本，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。例如：
只在IE浏览器中生效：

<!--[if IE]> 
<p>这段代码只会在IE浏览器中生效</p>
<![endif]-->

只在IE6中生效：

<!--[if IE 6]>
 <p>这段代码只会在IE6浏览器中生效</p>
<![endif]-->

只在有IE6以上版本生效：

<!--[if gte IE 6]>
<p>这段代码只在IE6及以上版本IE浏览器生效</p>
<![endif]-->

关于条件注释法的各种操作符可以参考课件条件注释，不需要记住所有的内容，了解就行。

CSS中IE6的hack方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie6</title>
        <style type="text/css">
            div p{
                _color: red;
            }/* 属性前缀法 */
            *html div h1{
                color: red;
            }/* 选择器注释法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 6]>
            <p>You are using Internet Explorer 6.</p>
            <![endif]-->
            <!-- 条件注释法 -->
        </div>
    </body>
</html>

先看这段代码在非IE6浏览器中的显示：

非IE6浏览器

从上图可以看出，针对IE6设置的Hack在非IE6浏览器中没有生效。
再看IE6浏览器中的显示：

IE6

很明显，在IE6中Hack生效了。

CSS中IE7的hack方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie7</title>
        <style type="text/css">
            div p{
                *color: red;
            }/* 属性前缀法 */
            *+html div h1{
                color: red;
            }/* 选择器注释法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 7]>
            <p>You are using Internet Explorer 7.</p>
            <![endif]-->
            <!-- 条件注释法 -->
        </div>
    </body>
</html>

看看这段代码在IE6和IE7中的显示对比：

对比

很明显，这段代码中的Hack只在IE7中生效。

更多的CSS hack方式可以参考以下资料：
史上最全的CSS hack方式一览
 BROWSERHACKS
需要注意的是，CSS hack不是万能，用的越多，bug越多，所以一个良好的具有兼容性的页面代码应该只有少量的hack。在写页面代码的时候如果有兼容性要求，就尽量使用兼容性好的CSS属性，在源头上就消除这些问题。

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

opacity
先在caniuse上查询

opacity

可以看到opacity在IE8中是部分兼容，IE7以下是不支持的。如下图：

ie7不支持opacity
经过查询可以使用filter:Alpha(opacity=40)来设置IE的元素透明度，如下图：

使用filter兼容IE

inline-block
先查询它的兼容性，如下图：

inline-block的兼容性
可以看到IE8以下的IE浏览器是部分支持该属性的，即块级元素display：inline-block是不支持的，行内元素display：inline-block是支持的。

Paste_Image.png

添加如下代码解决兼容问题

*display:inline;

*zoom:1;

ie7兼容inline-block

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

兼容的问题：首先，在开发网页的时候，由于时间成本的原因，不可能做到全浏览器都兼容。所以在开发之前就要做一个统计，统计你的用户群体使用的是什么浏览器。假如某一款浏览器的使用比例超过了5%（这个数字不固定，每个项目的要求不一样），你就需要针对这款浏览器做兼容处理了。
参考怎样可以很好地保证网页的浏览器兼容性？
渐进增强和优雅降级
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰退）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
参考优雅降级和渐进增强的区别

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

reset.css和normalize.css的作用
HTML标签在浏览器中都有默认的样式，不幸的是，不同的浏览器的默认样式之间是存在区别的，例如ul默认带有缩进样式，在IE下，它的缩进是由margin来实现的，而在Firefox下却是由padding来实现的。所以开发时浏览器的默认样式可能会给我们带来多浏览器的兼容问题，影响开发效率。
reset.css和normaliz.css都是用来将浏览器的默认样式覆盖掉，达到多个浏览器的一致性。
推荐使用normalize.css的原因
- normalize.css保护了有价值的默认值
  reset是通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。而normaliz,css显得更温和一点，保持了许多默认的浏览器样式。
normalize.css修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug，这超出了reset所能做到的范畴。
normalize.css不会让你的调试工具变得杂乱
使用reset会在浏览器调试工具中有大段的继承链，而 normalize.css不会。
参考：让我们谈一谈 Normalize.css
知乎: Normalize.css 与传统的 CSS Reset 有哪些区别

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

IE盒模型的width（height）属性是内容区、内边距和边框的宽度（高度）总和。如下图：

IE盒模型

标准盒模型的width（height）属性是指内容区的宽度（高度）。如下图：

标准盒子模型

怎样使 IE678使用标准盒模型?
添加doctype声明，使IE678使用标准模式，就会使用标准盒模型。反之，如果不添加doctype声明，使IE678进入怪异模式，它就会使用IE盒模型。
box-sizing:border-box
box-sizing是CSS3的属性，简单来说用来设置要使用哪种盒模型。默认值是content-box，即 Element width = width ，指的就是标准盒模型。
而另一个值：border-box，即 ( Element width = width + border + padding)，也就是IE盒模型。

8.virtualbox 安装 xp 虚拟机

IE6安装
安装的过程还是比较麻烦的，所以贴一个链接，方便以后再安装：VirtualBox虚拟机：[3]安装Ghost XP。

9.在 ie 6, 7, 8中展示盒模型、inline-block、max-width的区别

盒模型：
ie6

标准模式下

怪异模式下

ie7

标准模式下

怪异模式下

ie8

标准模式下

怪异模式下

从上面的图片可以看出IE盒模型和标准盒模型的区别。

块元素的inline-block
- ie6
  
  ie6不支持块元素inline-block
- ie7
  
  ie7不支持块元素inline-block
ie8

ie8支持块元素inline-block属性
行内元素的inline-block
- ie6
  
  ie6支持行内元素inline-block
ie7

ie7支持行内元素inline-block
ie8

ie8支持行内元素inline-block
max-width
ie6

ie6不支持max-width
ie7

ie7支持max-width
ie8

ie8支持max-width