六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 1459|回复: 0

Bootstrap浏览器支持

[复制链接]
 楼主| 发表于 2014-5-15 13:08:46 | 显示全部楼层 |阅读模式
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 和 9
Internet 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 不支持

请参考Can I use...以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。
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 和@import
Respond.js 不支持通过 @import 引入的CSS文件。例如,Drupal 一般被配置为通过 @import 引入CSS文件,Respond.js对其将无法起到作用。 请参考Respond.js 文档获取更多信息。
Internet Explorer 8 与 box-sizing
IE8不能完全支持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 8
Internet 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)}
请查看Windows Phone 8 and Device-Width以了解更多信息。
作为提醒,我们将其加入到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
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表