浏览器兼容

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。
CSS Hack有三种表现方式。
- 属性前缀法（即类内部hack）：例如IE6能识别下划线“”和星号“”。IE7能识别星号“”但不能识别下划线“”，IE6~IE10都认识“\9”，但firefox前述三个都不能认识。
- 选择器前缀法（即选择器hack）：例如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
- IE条件注释法（即HTML条件注释hack）：IE专有的hack方式（注：IE10+已经不再支持条件注释）。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
```
针对所有IE：
 
 针对IE6及以下版本：
 
 非IE浏览器：
 
 针对IE6以及IE6以上版本：
 
 
```
  史上最全CSS hack
  browserhacks

inline-block不兼容ie6/7。
- 方法一：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。兼容各浏览器的代码如下：* div {display:inline-block;**display:inline; *zoom:1;...}
- 方法二：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下：div {display:inline-block;...}div {*display:inline;}

根据项目需求，当客户需要兼容低版本浏览器时，那我们就需要针对这个需求去做兼容处理，一般低版本浏览器不可能兼容到显示达到完美，我们只需要保证不影响正常功能使用和基本布局不乱就行了。在可以沟通的情况下可以尽量说服客户放弃IE6/7
渐进增强：一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复

reset.css：在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
normalize.css：Normalize.css是一种CSS reset的替代方案。
有下面这几个目的：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来
  支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

参考

从下图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

1.jpg

从下图可以看到** IE 盒子模型**的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2.jpg

参考
IE6、7、8添加文档声明（doctype）即可使用标准盒模型。
box-sizing:border-box;是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起。
通常一个标准盒模型下的块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）；
如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）。
这个属性多用于排版问题，很多情况下很实用，简化了计算位置的问题。

因电脑配置问题，暂时没有安装虚拟机。

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