©
本文档使用 PHP中文网手册 发布
了解从现代到旧的浏览器和设备,这些浏览器和设备都是由Bootstrap支持的,包括每个浏览器和设备的已知怪癖和bug。
受支持的浏览器
引导程序支持最新稳定版本所有主要的浏览器和平台。在Windows上,我们支持InternetExplorer 10-11/MicrosoftEdge...
使用WebKit、Blink或Gecko的最新版本的替代浏览器,无论是直接使用还是通过平台的Web视图API,都不被明确支持。但是,在大多数情况下,引导应该在%29中显示并在这些浏览器中正确工作。下文提供了更具体的支助信息。
移动设备
一般来说,Bootstrap支持每个主要平台默认浏览器的最新版本。请注意,不支持代理浏览器(如Opera Mini,Opera Mobile的Turbo模式,UC Browser Mini,Amazon Silk)。
Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | Supported | Supported | N/A | Android v5.0+ supported | N/A |
iOS | Supported | Supported | Supported | N/A | N/A |
Windows 10 Mobile | N/A | N/A | N/A | N/A | Supported |
桌面浏览器
同样,支持大多数桌面浏览器的最新版本。
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Supported | Supported | N/A | N/A | Supported | Supported |
Windows | Supported | Supported | Supported, IE10+ | Supported | Supported | Not supported |
对于Firefox,除了最新的正常稳定版本之外,我们还支持最新版本扩展支持版本%28 ESR%29火狐的版本。
非正式地说,Bootstrap应该在Chromium和Chrome(Linux)、Firefox(Linux)和InternetExplorer 9(InternetExplorer 9)中看起来和表现得足够好,尽管它们没有得到官方的支持。
有关引导程序必须解决的一些浏览器错误的列表,请参阅我们的浏览器缺陷墙...
Internet资源管理器
支持InternetExplorer 10+;IE9和down则不支持。请注意,某些CSS 3属性和HTML 5元素在IE10中不完全支持,或者需要前缀属性才能实现全部功能。参观我能用…有关CSS 3和HTML 5功能的浏览器支持的详细信息。
如果您需要IE8-9支持,请使用Bootstrap 3。它是我们代码最稳定的版本,我们的团队仍然支持它进行重要的错误修复和文档更改。然而,没有新的功能将被添加到它。
移动平台上的MODERS和DULT
溢出和滚动
在iOS和Android overflow: hidden;上对<body>元素的支持相当有限。为此,当您在任一设备的浏览器<body>中滚动浏览模式的顶部或底部时,内容将开始滚动。请参阅Chrome bug#175502(在Chrome v40中修复)和WebKit错误#153852。
IOS文本字段和滚动
在IOS 9.2中,如果滚动手势的初始触摸在文本的边界内,则模式是打开的。<input>或者是<textarea>,<body>模式下的内容将被滚动,而不是模式本身。见WebKit bug#153856...
Navbar下降
.dropdown-backdrop由于z索引的复杂性,该元素不会在导航中的iOS上使用。因此,要关闭导航栏中的下拉菜单,您必须直接点击下拉元素(或任何其他会在iOS中触发点击事件的元素)。
浏览器缩放
页面缩放不可避免地会在Bootstrap和其他网页中的某些组件中呈现呈现工件。根据问题,我们可能会解决它(首先搜索,然后根据需要打开问题)。但是,我们往往忽略这些,因为除了哈克式的解决方法之外,他们通常没有直接的解决方案。
粘:hover/:focus移动
即使在大多数触摸屏上都不可能真正的悬停,但大多数移动浏览器都会模仿悬停支持并使:hover“粘”。换句话说,:hover样式在点击元素之后开始应用,只有在用户点击其他元素之后才停止应用。在移动第一站点上,这种行为通常是不可取的。
虽然在默认情况下禁用了引导程序,但它包含了解决此问题的方法。通过设置$enable-hover-media-query到true从Sass编译时,Bootstrap将使用mq4-悬停禁用:hover在模拟悬停的浏览器中的样式,从而防止粘性。:hover风格。对于这个解决方法有一些警告;有关详细信息,请参阅Shim的文档。
印刷
即使在一些现代浏览器中,打印也可能很奇怪。
从Safari v8.0开始,使用固定宽度.container类会导致Safari在打印时使用异常小的字体大小。见第14868期和WebKit bug#138192更多细节。一个潜在的解决办法是以下CSS:
@media print {
.container {
width: auto;
}}
Android股票浏览器
开箱即用,Android 4.1(甚至一些更新的版本显然)随浏览器应用程序一起发布,作为首选的默认浏览器(与Chrome相对)。不幸的是,浏览器应用程序通常存在很多错误和不一致的CSS。
选择菜单
在<select>元素上,如果存在border-radius和/或border应用,Android股票浏览器将不显示侧面控件。(有关详细信息,请参阅此StackOverflow问题。)使用下面的代码片段删除违规的CSS,并<select>在Android股票浏览器中将其呈现为无风格元素。用户代理嗅探避免了对Chrome,Safari和Mozilla浏览器的干扰。
<script>$(function () {
var nua = navigator.userAgent var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}})</script>
想看个例子吗?看看这个JSBin演示。
验证器
为了向旧的和错误的浏览器提供最好的体验,Bootstrap使用CSS浏览器黑客在几个地方,针对特定浏览器版本的特定CSS,以解决浏览器本身的bug。可以理解,这些黑客会导致CSS验证程序抱怨它们无效。在一些地方,我们还使用了一些还没有完全标准化的尖端css特性,但这些特性纯粹用于渐进增强。
这些验证警告在实践中并不重要,因为css中的非恶意部分确实完全有效,而hacky部分不会干扰非恶意部分的正常运行,因此我们为什么故意忽略这些特定的警告。
我们的HTML文档同样具有一些微不足道的和无关紧要的HTML验证警告,因为我们在Firefox中包含了一个解决方法。