任务十三~浏览器兼容
2016-08-05 本文已影响131人
dengpan
一、如何调试 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>
-
IE6中，如下图
IE6中不能识别max-width
-
IE7中，如下图
IE7中能识别max-width
-
IE8中，如下图
IE8中能识别max-width
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
