任务13-浏览器兼容

一、问答部分

1. 如何调试 IE 浏览器

• IE7及以上版本有调试台，可以按F12启动。

  
  
  

  Paste_Image.png
• 没有调试台的
  通过设置 边框颜色和背景色进行代码调试。
• 通过安装模拟器模拟不同版本的ie，微软官方有诸如virtual pc、Expression Web SuperPreview等。通常用的比较多的ietester。
  能够集成不同版本的浏览器，但是权威性不足。
• 虚拟机，安装带有不同版本IE的系统
  对宿机要求比较高，安装成本较高一点。

Paste_Image.png

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

1)、什么是CSS hack

CSS样式表的在各大浏览器中的表现不是完全一样的，因为各个浏览器及浏览器各个版本（如IE6-IE11，chrome，opera，firefox，safari），对于CSS的解析支持不一样，这就导致了在不同浏览器或者不同版本中，CSS的显示效果不一样，这时我们为了获得一致的CSS效果，就利用一些BUG或者特定样式去达到一样的效果，这个coding过程，我们称之为CSS hack。

2)、在 CSS 和 HTML里如何写 hack？

CSS Hack大致有3种表现形式：

• CSS属性前缀法
  由于IE发展较早，早期版本对于CSS的解析有部分没加严格限制，成为了历史遗留问题，利用这些BUG可以对某些CSS属性写CSS hack以达到效果。

.container{
            _color: red;/*IE6识别*/
            *color: red;/*IE6,IE7识别*/
            color: red\9;/*IE6-IE10识别*/
            color: red\0;/*IE8-IE10识别*/
            color: red\9\0;/*IE9,IE10识别*/
        }

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

 *html{}/*只对IE6生效*/
 *+html{}/*只对IE7生效*/

• IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  （即HTML条件注释hack）：（注：IE10+已经不再支持条件注释）这类hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
• 只在IE下生效

• 只在IE6以上版本生效

• 只在IE6以下版本生效

• 只在IE8上不生效

• 非IE浏览器生效

3)、在 CSS 中 ie6、ie7的 hack 方式

• IE6
  • 属性前缀法

     .box{
         _color: red;/*for IE6*/
     }

 - 选择器前缀法

*body{}/*for IE6*/

 -  条件注释法

• IE7

  • 选择器前缀法

*+body{}/*for IE7*/

 -  条件注释法

• IE6~IE7

  • 属性前缀法

.box{
    *color: red;/*for IE6~7*/
}

 - 选择器前缀法

@media screen\9{...}

 -  条件注释法

4)、ps：

CSS hack现在用的越来越少，能不用尽量不用，可以用最少的hack去实现多浏览器兼容的页面。所以不需要花很大精力去记，有这个概念，遇到了知道怎么查怎么解决就行。例如星号是做ie67的hack，下划线是ie6的hack。

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

• inline-block
  inline-block对于IE6、IE7并不支持，解决方法是优雅降级，将display属性值在IE6、7下写为display: inline;

inline元素的display属性设置为inline-block时，所有的浏览器都支持；
block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。
解决方式一

*display: inline; /* 将块级元素设置为内联对象呈递。*/
*zoom: 1;  /* 触发haslayout */

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

div{
    display: inline-block;
    *display: inline;
 }

• 透明度bug
  IE8及以下版本不支持opacity属性，可使用filter:alpha(opacity=50)替代

div{
    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;
}

• 双外边距浮动bug
  这也是很常见的bug，网上给出数据出现频率90%，是IE6和更低版本额双外边距浮动bug。在设置好浮动后，元素的外边距加倍

Paste_Image.png

• 不同浏览器的默认标签的margin和padding不同
  解决办法

*{
   margin: 0;
   padding: 0;
}

• 标签设置min-height不兼容解决办法
  如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{
   min-height:200px; 
   height:auto!important; 
   height:200px; 
   overflow:visible;
}

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

• 针对兼容、多浏览器覆盖有什么看法？CSS作为一种语言，设计成有很强的向前兼容性，无论是浏览器覆盖还是兼容都是解决bug的很好的方式，但是不应该过分信赖于hack和过滤器，因为并非掌握hack越多，自己的水平就越高。各个浏览器，各个版本，以及各个网页html千差万别，动一发则牵全身，所以要明智且受控制地应用hack和过滤器。之所以这么说，是因为如果CSS文件短小且简单，并且只需要应用很少个hack的话，那么放在主CSS文件中加以注释说明可能是安全的；但是之前说过，hack往往过于复杂，使代码很难阅读，所以最好将他们放在他们自己的样式表中，不但容易阅读，而且便于维护。但是这样就增加了工作量，所以建议还是少用hack和过滤器，能不兼容的地方就不兼容，考虑业务需求的情况下合理使用兼容。而至于多浏览器覆盖，我认为这个是可以合理考虑的，而且经常用也未尝不可，毕竟各大浏览器用户所占份额均不小 ，这点不容忽视。

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

• 使用策略：也许有各种fallback方案可以保证完全兼容性各个浏览器，但依然不能保证低端浏览器的使用体验，最多是看起来各个浏览器都一样了。因此，现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。

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

• reset.css：是通过重新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性。
• normalize.css：是reset.css的替代方案，保护有用的浏览器默认样式，修改浏览器自身bug，优化可用性。
• 为什么推荐使用 nomalize.css
  1）、Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
  2）、Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
  2）、其它

• 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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

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

有什么作用

• IE盒模型和标准盒模型的区别
  IE盒模型：宽度（width）=边框（border）+内边距（padding）+内容宽度（content）
  标准盒模型：宽度（width）=内容宽度（content）

• 怎样使IE678使用标准盒模型
  IE不添加doctype时（怪异模式）使用的是IE盒模型，要想使IE678使用标准盒模型，给IE678添加doctype即可。

• box-sizing: border-box;是CSS3新增属性，设置此属性之后，相当于以怪异模式解析。

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。 即IE盒模型算法。

二、操作部分

1、virtualbox 安装 xp 虚拟机

Paste_Image.png

virtualbox下载
xp镜像下载

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

• 在IE6、IE7、IE8中测试的盒模型代码如下：

    
    
    




box1


    box2

在IE6中渲染如下

有doctype声明，按标准盒模型解析

没有doctype声明，按IE盒模型解析

在IE7中渲染如下

添加doctype

未添加doctype

在IE8中渲染如下

添加doctype

未添加doctype

• 在IE6、IE7、IE8中测试的inline-block代码如下：

    
    
    




box1


    box2


    box3

在IE6中渲染如下

不能识别inline-block

在IE7中渲染如下

不能识别inline-block

在IE8中渲染如下

能识别inline-block

• 在IE6、IE7、IE8中测试的max-width代码如下：

    
    
    




box1box 1box1box1b ox1box1box1box1 box1box1
    box1 box1box1 box1box1 box1box1 box1
    box1 box1box1 box1box1 box1
    box1 box1box1 box1
    box1box 1box1box1b ox1box1box1box1 box1box1
    box1 box1box1 box1box1 box1box1 box1
    box1 box1box1 box1box1 box1
    box1 box1box1 box1

在IE6中渲染如下

不能识别max-width

在IE7中渲染如下

能识别max-width

在IE8中渲染如下

能识别max-width

** 本教程版权归作者和饥人谷所有，转载须说明来源！ **