杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。
说到浏览器兼容性,就不得不提国内的浏览器占有率现状,这也使得国内的前端工程师总是需要针对各式各样的浏览器做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 8Internet 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之间选择的文章。
希望高级浏览器一统天下的那天早日到来。
 

佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。