任务13-浏览器兼容
2017-02-18 本文已影响22人
mint9602
1.如何调试 IE 浏览器？
- IE浏览器7+自带的开发者工具，IE6可以采用border的方法或是下载virtural IE6进行辅助开发
- 采用模拟器的方式去模拟不同版本下的IE浏览器，如IEtester或chrome的付费插件Test IE
- 通过安装虚拟机的方式，安装不同版本的IE的运行环境去达到调试IE浏览器的目的
2. 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 为了解决不同浏览器或是浏览器不同版本的网页解析方式不一的问题，开发者撰写相应的css code而达到兼容目的，这整个过程叫做css hack
- css hack大致有三种方法：css属性前缀法、IE条件注释法和选择器前缀法
css 属性前缀法：
.box{
color:red; /* for all browsers */
_color:black; /* for ie6 */
*color:green; /* for ie6~7 */
color:pink\9; /* for ie6~10 */
}
选择器前缀法：
*body{
/* only for ie6 */
}
*+p{
/* for ie7 */
}
@media screen\9{
}
div{
/* for ie6~7 */
}
ie cc:
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
<!--[if IE 6]>
这段文字只在IE6显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本显示
<![endif]-->
<!--[if lt IE 6]>
这段文字只在IE6以下（不包括)版本显示
<![endif]-->
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
- ie6/7的css hack
- ie6
属性前缀法：
.box{
_color:black; /* for ie6 */
}
选择器前缀法：
*body{
margin:0;
}
条件注释法：
<head>
<!--[if IE 6]>
<body class="ie6">
<![endif]-->
</head>
- ie7
选择器前缀法：
*+body{
margin:0;
}
条件注释法：
<head>
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
</head>
- ie6~7
属性前缀法：
.box{
*color:black; /* for ie6~7 */
}
选择器前缀法：
@media body\9{
margin:0;
}
条件注释法：
<head>
<!--[if IE lte 7]>
<body class="ie6 ie7">
<![endif]-->
</head>
3. 列举几种浏览器兼容问题
- 不同浏览器的标签默认的margin和padding不一，解决方案是
*{margin:0;padding:0;} - 块级元素使用float以及存在左右margin时，IE6显示的margin比设定的大，解决方案是在添加float样式的标签内加入
display:inline; - 图片默认间距：有些浏览器在多个img标签放一起时出现默认间距，解决方案是使用float属性或者并排
原理：所有具有display:inline-block特性的元素，都有一个特点，那就是代码换行会被解析成空白，没有为什么，这就是浏览器的渲染机制，基于这一点，代码如果清除换行可以解决，但是不希望所有的代码都挤在一起，那么你就可以设置浮动来解决，目的无非就是让块属性元素在同排内显示 - 透明度的问题：
selector{
filter:alpha(opacity=50); /* for IE*/
-moz-opacity:0.5; /*for old versions of the Mozilla browsers*/
-khtml-opacity: 0.5; /* for old versions of Safari*/
opacity: 0.5;
}
- min-width或max-width：ie6不支持最大或最小宽高
/* 最小宽度 */
.min_width{
min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/* 最大宽度 */
.max_width{
max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
4. 针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
- 兼容多浏览器的看法：
- 分析需求，是否有兼容的必要性。针对特定浏览器的用户
包括页面的用户、参与设计的人员、用户的浏览器类型使用状况等 - 兼容程度，对于高级浏览器页面的内容展示要求要高，对于低级浏览器可以在不影响正常页面展示前提下有所降低
- 总的原则是，基于成本与效益间的权衡考虑
- 分析需求，是否有兼容的必要性。针对特定浏览器的用户
- 渐进增强和优雅降级的观点比较
渐进增强和优雅降级都是出于为不同浏览器提供兼容方案的目的，只是在实际开发时的思路不同。- 渐进增强是基于低级浏览器进行开发，在满足其内容、样式和交互的需求后，针对更加高级的浏览器实现设计、交互等的强化。
- 优雅降级是基于高级浏览器进行开发，在完成高级浏览器的各项要求后，针对低级浏览器无法支持高版本功能的问题，实现功能、设计等模块的逐步退化，并在退化过程中能求保证网页的基本功能和信息的实现。
5. reset.css和normalize.css分别是做什么的？为什么推荐使nomalize.css?
首先，由于不同的浏览器或是浏览器的不同版本在支持和渲染页面时出现的差异，导致开发者需要进行浏览器的兼容。针对这一问题，网络的大牛们想方设法出不同的解决方案，reset.css和normalize.css这两种不同思路的解决兼容性问题的方案应运而生。
- reset.css是早期的解决不同浏览器默认样式不一的问题的方案，主要思路是在css文档的初始部分重置不同元素的样式，使得不同的浏览器在初始样式上统一标准。但是这一方法的缺陷是过于暴力，把所有元素同一对待，一旦要使用如ul标签的前缀时，又得重新设置，浪费资源。
此时，一种新的解决这一问题的思路诞生——normalize.css。 - normalize.css在保留有用的浏览器默认样式的基础上，为不同浏览器提供通用样式的规范，即给定通用的样式，针对不同浏览器出现的兼容性问题分门别类的提供优化方案。
- 由此，我们可知reset.css就像倚天屠龙记中的七伤拳——欲伤人，先伤己，reset.css就是欲统一样式，先要把自己默认样式破坏个遍。
而normalize.css就如同武当的太极拳——能够在统一样式标准的前提下，保留浏览器的默认样式。
综上所述，目前normalize.css是解决浏览器兼容的最新也是目前来看最好的方案！
6. IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用?
- IE盒模型：width=border+padding+content。
W3C盒模型:width=content. - IE678使用标准盒模型：
在html最前面添加<!DOCTYPE html>声明。 - box-sizing:border-box作用：
使盒模型设定成IE盒模型的方式来计算宽度。
