|
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。 被支持的浏览器特别注意，我们坚决支持这些浏览器的最新版本： - Chrome (Mac、Windows、iOS和Android)
- Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
- Firefox (Mac、Windows)
- Internet Explorer
- Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，虽然我们不对其进行官方支持。 Internet Explorer 8 和 9Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要Respond.js配合才能实现对媒体查询（media query）的支持。 CSS特性 Internet Explorer 8 Internet Explorer 9
border-radius 不支持 支持
box-shadow 不支持 支持
transform 不支持 支持，需带 -ms 前缀
transition 不支持
placeholder 不支持
Internet Explorer 8 和 Respond.js在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。 Respond.js 和 跨域（cross-domain） CSS 的问题如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。 Respond.js 和 file://由于浏览器的安全规则问题，Respond.js 不能通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性，必须用http服务器（例如apache、nginx）托管HTML页面才可以。请参考 Respond.js 文档 获取更多信息。 Respond.js 和@importRespond.js 不支持通过 @import 引入的CSS文件。例如，Drupal 一般被配置为通过 @import 引入CSS文件，Respond.js对其将无法起到作用。 请参考Respond.js 文档获取更多信息。 Internet Explorer 8 与 box-sizingIE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为.container使用max-width。 IE兼容模式Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 <meta> 标签加入到你的页面中： <meta http-equiv="X-UA-Compatible" content="IE=edge">
此标签被加入到所有文档页面和案例页面中，以确保在每个被支持的IE浏览器中保持最好的页面展现效果。 Windows 8 中的 Internet Explorer 10 和 Windows Phone 8Internet Explorer 10并没有将屏幕的宽度和视口（viewport）的宽度区别开，这就导致Bootstrap中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段CSS暂时修复此问题： @-ms-viewport { width: device-width; }
然而，这样做会导致Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的“手机”呈现方式。为了解决这个问题，还需要加入以下CSS和JavaScript代码，直到微软修复此问题。 @-webkit-viewport { width: device-width; }@-moz-viewport { width: device-width; }@-ms-viewport { width: device-width; }@-o-viewport { width: device-width; }@viewport { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style") msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) ) document.getElementsByTagName("head")[0].appendChild(msViewportStyle)}
作为提醒，我们将其加入到Bootstrap文档中作为一个案例。 Safari对百分比数字凑整的问题从OS X版Safari v6.1和iOS v7.0.1版Safari开始，Safari浏览器所包含的绘制引擎对于处理.col-*-1所对应的很长的百分比小数存在bug。也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。我们目前解决不了这个问题(see #9282)，但是你可以避免： - 为最后一列添加.pull-right，将其暴力向右对齐
- 手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）
我们将会继续跟踪此问题，如果有更简易的解决方案，我们会更新代码。 模态框和移动设备超出范围和滚动<body>元素在iOS和Android上对overflow: hidden的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时， <body>中的内容将开始随着滚动。 虚拟键盘还有，如果你正在模态框上面输入内容 -- iOS还有一个绘制上的bug，当触发虚拟键盘之后，其不会更新fixed元素的位置。这里有几种解决方案，包括将fixed元素转变为position: absolute或启动一个定时器手工修正其位置。这些没有加入Bootstrap中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。 浏览器缩放页面缩放功能不可避免的会将某些组件搞得乱七八糟，不光是Bootstrap，整个互联网上的所有网站都是这样。针对具体问题，我们或许可以修复它（如果有必要的话，请先搜索一下你的问题，看看是否已有解决方案，然后在向我们提交issue）。然而，我们更倾向于忽略这些问题，由于这些问题除了一些hack手段，一般没有直接的解决方案。
摘自：http://v3.bootcss.com/getting-started/#browsers
| 
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡