首页
学习
活动
专区
工具
TVP
发布

浏览器和设备 | Browsers and devices

了解从现代到旧的浏览器和设备,这些浏览器和设备都是由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-querytrue从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中包含了一个解决方法。

扫码关注便宜云主机开发者

领取便宜云主机代金券

http://www.vxiaotou.com