饥人谷-任务十三

一、如何调试 IE 浏览器

• IE7以上可以用控制台来调试，按F12即可
• 没有控制台的，通过设置border: 1px solid red; outline: 1px solid red来快速帮组定位问题所在。
• 可以通过IETEST，但是很多时候并不能实际体现出IE浏览器真正的兼容性。
• 虚拟机，安装带有不同版本IE的系统

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

• CSS样式表在各大浏览器中的表现不是完全一样的，因为各个浏览器及浏览器各个版本（如IE6-IE11，chrome，opera，firefox，safari），对于CSS的解析支持不一样，这就导致了在不同浏览器或者不同版本中，CSS的显示效果不一样，这时我们为了获得一致的CSS效果，就利用一些BUG或者特定样式去达到一样的效果，这个coding过程，我们称之为CSS hack。
• CSS Hack大致有3种表现形式：
  （1）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识别*/ 
}```
常用的就是* 和 _还有-
（2）选择器前缀法
（即选择器hack）选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

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

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

• 只在IE6以下版本生效
  ```

 - 只在IE8上不生效
       ```

• 非IE浏览器生效
  ```

- 在 CSS 中 ie6、ie7的 hack 方式
（1）IE6
   - 属性前缀法
    ```
    .box{ 
        _color: red;/*for IE6*/
       }```
   - 选择器前缀法
    ```
    *body{}
  /*for IE6*/
       }```
   - 条件注释法
    ```
    

（2）IE7

• 选择器前缀法
  *+body{}/*for IE7*/
• 条件注释法

```
  
（3）IE6~IE7
- 属性前缀法

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

}```

• 选择器前缀法

  @media screen\9{...}
}```
- 条件注释法

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

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

• IE6/7实现display:inline-block
  有两种方法，第一种，先声明该元素display:inline-block，触发其layout，再在第二条样式上再声明为display:inline，如：

.test{display:inline-block; /其他样式.../}
.test{display:inline;}```
第二种方法（推荐），利用IE6/7的Css专有前缀来触发layout（感觉怎么有点像js的setTimeout）:

.test{display:inline-block; *zoom: 1; *display: inline;}```

- **IE6双倍浮动行距**
在IE6下，当一个div在另一个div向左浮动，并且带有margin-left的样式，那么这时它的左边距是样式定义的双倍，同理如果是向右浮动和margin-right，效果是一样的。不过在此后浮动的div的边距反倒是没问题的，只是第一个有此问题。
这时，解决的方法是：简单给该div加个```_display:inline;```样式即可

- li里元素都浮动li在ie67下方会产生4px间隙问题
解决方法：添加```*vertical-align:top```
- **CSS透明问题** 
IE8及以下版本不支持```opacity```属性，可使用```filter:alpha(opacity=50)```替代
解决方法：
```-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”```

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

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

• 双外边距浮动bug
  这也是很常见的bug，网上给出数据出现频率90%，是IE6和更低版本额双外边距浮动bug。在设置好浮动后，元素的外边距加倍
  解决方法：在这个div里面加上display:inline;

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

• 针对兼容、多浏览器覆盖有什么看法？CSS作为一种语言，设计成有很强的向前兼容性，无论是浏览器覆盖还是兼容都是解决bug的很好的方式，但是不应该过分信赖于hack和过滤器，因为并非掌握hack越多，自己的水平就越高。各个浏览器，各个版本，以及各个网页html千差万别，动一发则牵全身，所以要明智且受控制地应用hack和过滤器。之所以这么说，是因为如果CSS文件短小且简单，并且只需要应用很少个hack的话，那么放在主CSS文件中加以注释说明可能是安全的；但是之前说过，hack往往过于复杂，使代码很难阅读，所以最好将他们放在他们自己的样式表中，不但容易阅读，而且便于维护。但是这样就增加了工作量，所以建议还是少用hack和过滤器，能不兼容的地方就不兼容，考虑业务需求的情况下合理使用兼容。而至于多浏览器覆盖，我认为这个是可以合理考虑的，而且经常用也未尝不可，毕竟各大浏览器用户所占份额均不小 ，这点不容忽视。
• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

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

• Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
• Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
• 推荐使用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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

六、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、安装VB

VB安装

2、

• 盒模型
  这是有!doctype声明的：

    
    
    



    
have !doctype
    
have !doctype

IE6盒模型有!doctype声明标准盒模型

IE7盒模型有!doctype声明标准盒模型

IE8盒模型有!doctype声明标准盒模型

这是没有!doctype声明的：

    
    
    



    
without !doctype
    
without !doctype

IE6盒模型没!doctype声明IE盒模型

IE7盒模型没!doctype声明IE盒模型

IE8盒模型没!doctype声明IE盒模型

• inline-block

    
    
    




  inline-block


  inline-block

  

  inline-block

IE6下不兼容

IE7下不兼容

IE8下兼容

• max-width

    
    
    




    svsdvvvvvvv
    vvfdsvsdfv
    sdvfsdfv
    sdfvsfvs
    fvsdsd

IE6下的max-width不兼容

IE7下的max-width兼容

IE8下的max-width兼容