任务13-浏览器兼容

2016-09-07 本文已影响0人小木子2016

一、问答部分：

1. 如何调试 IE 浏览器?

如果是IE7版本以上可以使用自带的开发者工具，按F12，即可打开：

如果是IE6可以使用边框直接进行调试。
使用软件IEterser来进行不同的IE版本调试，但是模拟的效果有缺陷，不能保证网页运行在真正的IE浏览器上没有问题。
安装虚拟机分别运行IE不同的版本进行调试，推荐使用这个方便，稳定。

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

CSS hack由于不同厂商的浏览器，比如Internet Explore,Safari,Mozila 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{}
- IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
非IE浏览器生效
在CSS中，IE6，IE7的hack方式：
IE6：
<pre>属性前缀法：
.item{
_color:yellow;/for IE6/
}
</pre>
<pre>选择器前缀法：
*h1{
color:yellow;/for IE6/
}
</pre>
<pre>条件注释法：

</pre>

IE7:
<pre>属性前缀法：
.item{
*color:yellow;/for IE7/
}
</pre>

<pre>选择器前缀法：
*+body{
color:yellow;/for IE7*/
}
</pre>

<pre>条件注释法：

</pre>

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

inline-block：对于IE6、IE7并不支持，解决方法是优雅降级，将display属性值在IE6、7下写为display: inline;
inline元素的display属性设置为inline-block时，所有的浏览器都支持；block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。
方法一：
<pre>*display: inline; /* 将块级元素设置为内联对象呈递。*/ *zoom: 1; /* 触发haslayout */</pre>

方法二：
先使用display: inline-block;属性触发块级元素，然后再定义display:inline;，让块元素呈递为内联对象。需要注意的是，两个display 要先后放在两个CSS声明中才有效果，顺序也不能反。
<pre>
div{
display: inline-block;
*display: inline;
}
</pre>

opacity,IE8及以下版本是不支持opacity属性，可以使用filter:alpha(opacity=40)替代
<pre>
.opacity{
filter: alpha(opacity=50);/* IE /
-moz-opacity: 0.5;/ 老版Mozilla /
-khtml-opacity: 0.5; / 老版Safari /
opacity: 0.5; / 支持opacity的浏览器*/
}
</pre>

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

兼容问题：在开发网页的时候，由于各方面的原因，不可能做到所有的浏览器都兼容。所以在开发之前就要做一个统计，统计你的用户群体使用的是什么浏览器。假如某一款浏览器的使用比例超过了5%（这个数字不固定，每个项目的要求不一样），你就需要针对这款浏览器做兼容处理了。兼容并不是一定要分毫不差的在每个浏览器都很好的实现，对于一些老旧的浏览器，只要兼容到不是那么难看的程度就可以了，为了极少数的用户去花费极大的精力去兼容是不可取的。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给。而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
使用策略：也许有各种fallback方案可以保证完全兼容性各个浏览器，但依然不能保证低端浏览器的使用体验，最多是看起来各个浏览器都一样了。因此，现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。

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

reset.css是重新定义标签样式，把浏览器的默认样式覆盖掉，让整个浏览器保持渲染的一致性。
normalize.css是reset.css的替代方案。它重置掉该重置的样式，保留有用的浏览器默认样式，同时进行一些bug的修复，它相对平和。

推荐使用nomalize.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
知乎: Normalize.css 与传统的 CSS Reset 有哪些区别

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

区别：

W3C盒模型和IE盒模型尺寸图

W3C盒模型总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE盒模型总宽度=margin-left+width+margin-right
W3C盒模型总高度 = margin-top+ border-top + padding-top + height + padding-bottom+ border-bottom+ margin-bottom
IE盒模型总高度=margin-top+height+margin-bottom

怎样使IE678使用标准盒模型
添加doctype声明，使IE678使用标准模式，就会使用标准盒模型。反之，如果不添加doctype声明，使IE678进入怪异模式，它就会使用IE盒模型。
box-sizing:border-box的作用：
box-sizing 是CSS3的属性，用来改变默认的 CSS 盒模型对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。
content-box：默认值，标准盒模型。 width
与 height
只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距都在这个盒子的外部。比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box： width
与 height
包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的盒模型。注意：这个时候内边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px. 如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过border-box来隐藏元素。
尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。