浏览器兼容与CSS技巧

1.如何调试 IE 浏览器

IE7以上（包括Edge)自带开发者工具。
Edge：

Edge开发者工具

安装虚拟机，安装各种不同版本的IE来调试。

使用IEtest来模拟运行不同的IE版本。

---

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

hack指的是利用浏览器的一个bug来解决另一个bug，CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），例如加上 " * " 和" _ " 只有ie6可以识别，其他浏览器默认不会识别这段代码，就做到了只对ie6单独设置的效果。

通过浏览器识别字符标准对应表可以得知：

大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。

\9 ：所有IE浏览器都支持

_和- ：仅IE6支持

* ：IE6、E7支持

\0 ：IE8、IE9支持，opera部分支持

\9\0 ：IE8部分支持、IE9支持

\0\9 ：IE8、IE9支持

根据此对应表，可以得知：

1.区别IE和非IE浏览器

#tip{ background:blue;非IE背景蓝色 因为所有浏览器都能解释

background:red\9;IE6、IE7、IE8、IE9背景紅色

2.区别IE6,IE7,IE8,FF

#tip{ background:blue;Firefox}背景变蓝色 所有浏览器都支持

background:red\9;IE8背景变红色 IE6、7、8、9支持覆盖上面样式

*background:black;/E7背景变黑色 IE6、7支持又一次覆盖上面样式

_background:orange;IE6背景变橘色，仅IE6支持又一次覆盖上面样式

【说明】："*"因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

3.区别IE6、IE7、Firefox

#tip{ background:blue;Firefox背景变蓝色

*background:black;IE7背景变黑色

_background:orange;IE6背景变橘色

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

hack只是解决兼容问题的一种手段，在实际项目过程中，应尽量减少hack的使用，根据不同的项目要求，在编码过程中最好就可以提前考虑到兼容问题。

---

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

1.IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。

解决IE6、IE7兼容性的方法：
1.首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2.直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：

*display:inline;
*zoom:1;
}```

2.min-height在IE7以下不支持，一般采用把高度写死来解决这个问题。

3.opacity是用来设定元素透明度的， 是CSS 3里的一个属性，IE8以下不支持，包括一些老版本的浏览器也不支持。

.opacity{
filter:alpha(opacity=50); /* IE /
-moz-opacity:0.5; / 老版Mozilla /
-khtml-opacity:0.5; / 老版Safari /
opacity: 0.5; / 支持opacity的浏览器*/
}```

---

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

具体做不做兼容， 兼容到什么程度，不能一概而论，应该根据不同项目来具体调整，主要是项目面向的用户使用各浏览器所占的百分比，一般来说，某个浏览器的用户使用量超过 5% 的时候，就应该对该浏览器进行兼容处理了，反之，为了个别用户量极小的浏览器而特地花费了大量的时间与精力来做兼容，是不可取的；甚至某些通过hack解决的兼容问题会带来其他一些难以预料到的问题，得不偿失。一般来说，兼容程度大致分为三个级别：
A： 好看又好用。
B：好用但不好看，好用但有些外观无法识别。
C：不好看，但功能可以勉强使用。
我们应对于不同的项目要求和不同的浏览器版本灵活选择这三种兼容程度。

渐进增强指的是先在较低版本的、兼容性较差的浏览器上进行编码，以保证正常使用，然后再对其他高版本、兼容性强的浏览器做出一些功能较为强大的编码。

优雅降级与渐进增强相反，先在高版本、兼容性强的浏览器实现功能，然后根据要求对低版本浏览器进行兼容处理。

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

---

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

reset.css是通过重新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性，相对暴力；但是reset仍有自己的优点和应用场景：
1.商业产品，建议使用CSS reset。原因就是浏览器版本迭代越来越快，对设计的还原要求较高的产品，如果浏览器版本升级而影响WEB界面发生细微变化，这是无法接受的。
2.多人协作项目，建议使用CSS reset，为了省事，高效，规范团队。
3.个人项目，比如博客、文档，完全不需要CSS reset。

Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复。Normalize 实际上就是一段CSS代码，通过在HTML开头的引用来达到类似与reset的目的。

创造normalize.css有下面这几个目的：

1.保护有用的浏览器默认样式而不是完全去掉它们
2.一般化的样式：为大部分HTML元素提供
3.修复浏览器自身的bug并保证各浏览器的一致性
4.优化CSS可用性：用一些小技巧
5.解释代码：用注释和详细的文档

Normailze.css的优点：

1. Normalize.css 保护了有价值的默认值
   Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug
   它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱
   使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的
   这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档
   Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
   这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

如何使用 normalize.css

首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。
策略一：将normalize.css
作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。
策略二：引入normalize.css
源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。

引用：来，让我们谈一谈 Normalize.css

---

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

盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。对于盒模型的详细解答在前面的文章盒模型基础中。
box-sizing:border-box其实就是在声明doctype的情况下对盒模型使用怪异模式。
使用场景：
一般来说，百分比为宽度的容器设置padding时,容器的宽度就会像外扩展相应的padding值,要使宽度不被撑开,那么就是用box-sizing:border-box;会控制这种情况。在这种情况下，使用box-sizing:border-box;比较好。
推荐写法：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}```
【说明】：选择器 * 无法覆盖到伪元素，所以需要给 :before 和 :after 分别设置。而通过继承的方式应用到所有元素，需要时可以方便的设置某个元素及其后代元素的 box-sizing 回 content-box。
***
##7.在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的区别

**由于win10无法使用ietester，所以在XP虚拟机中运行ieteser：**
盒模型代码：

```
1.不加，在怪异模式下运行代码：

怪异模式下ie 6、7、8的盒模型

2.加<！doctype html>，在标准模式下运行：

标准模式下 ie 6、7、8的盒模型

inline-block 代码：

  
  
  


你好
世界

```

IE 6、7 中运行：

![](http://upload-images.jianshu.io/upload_images/2399926-94b010e4a8c9451e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

IE 8中运行：

![](http://upload-images.jianshu.io/upload_images/2399926-d6e0a6b181ac74c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

max-width 代码：

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

```

IE 6中运行：

IE 7、8中运行：

---

本文版权归本人和饥人谷所有，转载请注明来源。