CSS3对老式浏览器适配以及HTML5适配

• CSS HACK
• 老式浏览器支持HTML5
• 老式浏览器支持CSS3

CSS HACK

Paste_Image.png

Brower

Paste_Image.png

几款浏览器的市场份额

Paste_Image.png

分辨率使用范围

Paste_Image.png

IE6适配 缝隙缝隙问题

Paste_Image.png

IE8 padding-left不生效的问题

Paste_Image.png

因为在IE8中，左边部分脱离文档流 导致骑在了上面 所以padding-left设置50不起作用
故要设置200px才可以
但是，如何实现IE56的兼容性呢？

Paste_Image.png

添加*号即可只在IE67起作用
当然也有很多HACK，这里就不一一列举了。

• 这里有篇文章 骚年秘籍拿去
  http://www.duitang.com/static/csshack.html
  http://blog.csdn.net/freshlover/article/details/12132801
• CSS常见BUG
  http://kayosite.com/ie6-common-css-bug.html

Paste_Image.png

当然，虽然有着CSS HACK来适配浏览器版本问题 但是呢 很多大公司的网站会写如上的一句话 来使得浏览器用高版本进行适配工作

除了以上的方法，我们这里也有一些框架是用来专门解决这个问题的

• （鄙视）IE 嘿嘿 这里就提供了兼容IE6的方案
  http://www.bootcss.com/p/bsie/

让老式IE浏览器支持HTML5

• 引入下面这段代码 即可 记住一定要引导到head部分 才能生效

```

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

###让老式浏览器支持CSS3

- 加入下面这句话 即可 

behavior:url(ie-css3.htc);```

Paste_Image.png

当然我这里还有篇文章，用来解决CSS3不兼容问题

IE中的CSS3不完全兼容方案

其中的圆角 阴影 等等 处理方式 还是非常有用的