Bootstrap浏览器兼容性

说到 浏览器兼容性 ，就不得不提国内的浏览器占有率现状，这也使得国内的前端工程师总是需要针对各式各样的浏览器做 CSS Hack ，倘若你想要通过使用 Bootstrap 来避免这些额外的编码，那你就错了。

自从推出了Bootstrap3以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以如果你的项目牵涉到IE8、IE7，甚至是IE6，那么就可以好好考虑是否还要执着于Bootstrap3了（当然，Bootstrap2相对而言会更加适合这种情况）。

不过如果你是跟随时代潮流的前端工程师，而且恰巧你的客户也推崇更为先进的前端技术，那么恭喜你，Bootstrap3肯定不会让你失望。

 

兼容浏览器概要

• Chrome (Mac、Windows、iOS和Android)
• Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
• Firefox (Mac、Windows)
• Internet Explorer
• Opera (Mac、Windows)

 

CSS3属性在IE8以及IE9中的兼容性表现

CSS特性	Internet Explorer 8	Internet Explorer 9
border-radius	不支持	支持
box-shadow	不支持	支持
transform	不支持	支持，需带 -ms 前缀
transition	不支持
placeholder	不支持

可以看到，由于CSS3无法在IE8中大显身手，所以你的项目在视觉交互上可能要大打折扣了。

 

IE兼容模式带来的问题

很多在XP中升级到IE8的用户会发现一些布局或者交互的问题，其实这是由于Bootstrap并不支持IE的兼容模式，为了解决这个问题，我们需要在head中引入以下meta标签。

< meta  http-equiv = "X-UA-Compatible"  content = "IE=edge” >

这个标签能够确保你的每个页面能够在兼容模式下正常地被渲染。

 

写在最后

由于低级浏览器对于CSS3以及HTML5的支持很有限，所以想要采用Bootstrap2还是Bootstrap3得取决于项目本身的需求以及客户群体，有兴趣的朋友可以看看这篇关于 Bootstrap2和3之间选择的文章。

希望高级浏览器一统天下的那天早日到来。