Bootstrap浏览器兼容性

2024-05-24 04:45:45

说到浏览器兼容性，就不得不提国内的浏览器占有率现状，这也使得国内的前端工程师总是需要针对各式各样的浏览器做 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之间选择的文章。

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

Bootstrap浏览器兼容性相关推荐

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
微信转盘抽奖前端源码(三)：移动端浏览器兼容性(12个奖品，指针开始时指向奖品)
一 :兼容性函数 function Compatible(){document.documentElement.style.overflow = 'hidden';function getVendor ...
浏览器兼容性—学习笔记
浏览器兼容性 1.浏览器内核 1.1主流浏览器:拥有自主研发内核: 1.2内核: 浏览器类型内核 JS引擎 IE Trident JScript Firefox Gecko TraceMonkey ...
介绍几款浏览器兼容性测试工具
昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒. IETester 这是我最先 ...
如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级. caniu ...
47种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...
html 布局兼容性,HTML+CSS入门浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象: ...
再谈浏览器兼容性测试
今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国 ...
CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...

最新文章

热门文章