任务十三~浏览器兼容

作者: dengpan | 来源:发表于2016-08-05 09:29 被阅读131次

任务十三~浏览器兼容
任务十三-浏览器兼容
任务十二，浏览器兼容
任务十二-浏览器兼容
任务12——浏览器兼容
任务13：浏览器兼容
任务12 浏览器兼容
浏览器前缀 js输出
浏览器前缀js输出
浏览器前缀 js输出

一、如何调试 IE 浏览器？

在IE7以上的版本中可以通过按快捷键F12调出开发人员调试框，如下图

IE7以上调试工具
在没有调试工具的版本上可以通过设置border、outline（IE6不支持）和**javascript: alert (document.get ...) **来进行调试
可以使用模拟器进行调试，比如virtual pc、Expression Web SuperPreview、ietester
通过安装虚拟机的方法调试，如下图

虚拟机调试

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

CSS hack由于不同厂商的浏览器，比如IE,Safari,Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果，CSS hack的目的就是使你的CSS代码兼容不同的浏览器抑或也可以反过来利用CSS hack为不同浏览器版本编写不同的CSS效果（整理自百度百科）
CSS 和 HTML里hack写法：

HTML里IE条件注释

IE6下

<!--[if IE 6]>
          <p>这里的内容只会在IE6中显示</p>
        <![endif]-->

IE6上

<!--[if gte IE 6]>
          <p>这里的内容会在IE6以上版本显示</p>
        <![endif]-->

IE中

<!--[if IE]>
          <p>这里的内容会在IE中显示</p>
        <![endif]-->

css属性前缀法，通过在属性前面添加特殊符号，使IE各版本能够识别

.css_hack{    
   color:red; /* 所有浏览器 */  
   color:blue !important;/* 除了IE6外的所有浏览器 */  
   *color:black; /* IE6, IE7 */  
   +color:olive;/* IE6, IE7*/  
   color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
   color:pink\0; /* IE8, IE9, IE10 */  
   color:orange\9\0;/*IE9, IE10*/  
   _color:green; /* 只在IE6中 */  
}

选择器前缀法，针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack

*html #selector {} /* 只对IE6生效 */
 *+html #selector {} /* 只对IE7生效 */
 @media screen\9 { .selector { property: value; } } /* 只对IE6、7生效 */ 
@media \0screen {body { background: red; }} /* 只对IE8生效 */ 
@media \0screen\,screen\9{body { background: blue; }} /* 只对IE6，IE7，IE8有效 */ 
@media screen\0 {body { background: green; }} /* 只对IE8，IE9，IE10生效 */ 
@media screen and (min-width:0\0) {body { background: gray; }} /* 只对IE9，IE10生效 */
@media screen and (-ms-high-contrast: active), 
(-ms-high-contrast: none) {body { background: orange; }} /*只对IE10有效*/

在 CSS中IE6的 hack 方式

IE条件注释

<!--[if IE 6]>
     <div class="ie6">only ie6 can see</div>
 <![endif]-->

-css属性前缀法
div{ _color:orange; }

选择器前缀法

*html div {
     color: orange;
}

如图，在IE6中显示的效果图

IE6中的显示效果

在非IE6的浏览器中显示效果如下图

chrome浏览器
可以看出在chrome中条件注释的内容并未显示，更不用说为其设置的颜色！！

在 CSS中IE7的 hack 方式

IE条件注释

<!--[if IE 7]>
     <div class="ie6">only ie6 can see</div>
 <![endif]-->

-css属性前缀法
div{ *color:orange; }

选择器前缀法

*+html div {
     color: orange;
}

如图，在IE7中显示的效果图

IE7中显示效果图
在非IE7的浏览器中显示效果如下图

chrome浏览器中显示效果
更多知识···

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

opacity，查询其浏览器兼容性如下图
opacity兼容性
由上图可知opacity在IE中支持程度不是很好，在IE6、IE7、IE8中也只是部分兼容，首先看在IE7中的支持程度，在之前的代码中补上如下代码

.center{
                width: 300px;
                height: 300px;
                background: orange;
                opacity: 0.4;
            }

在IE7中显示效果如下

opacity在IE7中显示效果

而在现代浏览器中的显示效果如下

opacity在chrome中显示效果
要在IE7中兼容可以使用一下代码

filter:alpha(opacity=40);

此时在IE7中的显示效果如下图

opacity在IE7hack后效果图

inline-block，查询其浏览器兼容性如下图
inline-block兼容性
由上图可知inline-block在IE中支持程度不是很好，在IE6、IE7中也只是部分兼容，首先看在IE7中的支持程度，如下代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>exercise</title>
        <style>
            div{
                display: inline-block;
            }
            .box1{
                width: 300px;
                height: 300px;
                background: orange;
            }
            .box2{
                width: 300px;
                height: 300px;
                background: pink;
            }
            .box3{
                width: 300px;
                height: 300px;
                background: olive;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

在IE7中显示效果如下

inline-block在IE7中显示效果图

而在现代浏览器中的显示效果如下

inline-block在chrome中显示效果图
要在IE7中兼容可以使用一下代码

*display: inline;
*zoom:1;

此时在IE7中的显示效果如下图

inline-block在IE7hack后显示效果图

IE6中浮动元素添加margin时左外边距的双倍问题，如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1{
            background: orange;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
        }
        .box2{
            background: olive;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在IE6中显示效果如下

双外边距问题

而在现代浏览器中的显示效果

chrome无双外边距问题
要在IE6中兼容可以使用一下代码，如下

.box1{
            background: orange;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
            display: inline;
        }

此时在IE7中的显示效果如下图

解决浮动左外边距双倍问题后效果图

还有更多····常见浏览器的兼容问题

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

对于兼容性、多浏览器覆盖，调查统计自身产品用户浏览器使用情况，当某一浏览器使用用户少于5%时，就可以忽略或者只保证产品基本功能可以使用，不应完全兼容和覆盖所有的浏览器，浏览器应分级支持
渐进增强是指在编写web页面时，首先保证最核心的功能实现，让任何低端的浏览器都能看到页面内容，然后考虑使用高级但是非必要的CSS和Javascript等增强功能，为当前和未来的浏览器提供更好的支持，给用户提供更好的体验
优雅降级是指在编写代码时，先考虑低端设备用户能否看到所有内容，然后在此基础上为高端用户进行设计，不仅为高端用户提供完美用户体验，也为不同性能等级的用户提供基本的用户体验

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

reset.css是通过为几乎所有的元素施加默认样式，强行使得元素在显示时有相同的视觉效果
normalize.css是reset.css的替代方案，保护有用的浏览器默认样式，重置应重置的css，修改浏览器自身bug，优化css可用性
相较于reset.css的“暴力”，normalize.css更加“平和”，使用 normalize.css的好处：
normalize.css保护了有价值的默认值
- reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合
normalize.css修复了浏览器的bug
- 它修复了常见的桌面端和移动端浏览器的bug。这往往超出了reset所能做到的范畴。关于这一点，normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug
normalize.css不会让你的调试工具变的杂乱
- 使用reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式
normalize.css是模块化的
- 这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）
normalize.css拥有详细的文档
- normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试
以上内容引用自来，让我们谈一谈 Normalize.css

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

IE盒模型和标准盒模型的区别：
IE盒模型： 宽度（width）=边框（border）+内边距（padding）+内容宽度（content）
标准盒模型：宽度（width）=内容宽度（content）
IE6、IE7、IE8使用标准盒模型的方法是：给IE6、IE7、IE8都添加doctype声明时即可成为标准盒模型
box-sizing是一个事先定义盒模型尺寸解析的方式，其属性值border-box相当于IE的怪异模式，此时的宽度（width）=边框（border）+内边距（padding）+内容宽度（content），如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            background: orange;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            padding: 10px;
            margin: 25px;
        }
        .box{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box"></div>
</body>
</html>

效果图如下

设置box-sizing:border-box之后的效果图

七、操作1：virtualbox安装xp 虚拟机

Windows下virtualbox安装xp虚拟机如下图

virtualbox安装xp虚拟机
virtualbox可以去官网下载Virutalbox
xp镜像文件可以到MSDN，我告诉你下载

八、操作2：在IE6、IE7、IE8中展示盒模型、inline-block、max-width的区别

盒模型在IE6、IE7、IE8中，如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            background: orange;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            padding: 10px;
            margin: 25px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

IE6中，如下图

IE6中添加doctype声明时效果图
IE6中未添加doctype声明时效果图
IE7中，如下图

IE7中添加doctype声明时效果图
IE7中未添加doctype声明时效果图
IE8中，如下图

IE8中添加doctype声明时效果图
IE8中未添加doctype声明时效果图
inline-block在IE6、IE7、IE8中，如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            display: inline-block;
        }
        .box1{
            background: orange;
            width: 100px;
            height: 100px;
        }
        .box2{
            background: pink;
            width: 100px;
            height: 100px;
        }
        .box3{
            background: olive;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

IE6中，如下图

IE6中不能识别inline-block
IE7中，如下图

IE7中不能识别inline-block
IE8中，如下图

IE8中能识别inline-block

注意：在IE6、IE7中行内元素能够识别inline-block
max-width在IE6、IE7、IE8中，如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        p{
            max-width: 200px;
            height: 200px;
            font-size: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test </p>
</body>
</html>