在 GitHub 上檢視

瀏覽器和裝置

瞭解 Bootstrap 支援的瀏覽器和裝置，從現代到舊版，包括每個瀏覽器和裝置已知的怪異行為和錯誤。

支援的瀏覽器

Bootstrap 支援所有主要瀏覽器和平台的最新穩定版本。在 Windows 上，我們支援 Internet Explorer 10-11 / Microsoft Edge。

其他瀏覽器使用最新版本的 WebKit、Blink 或 Gecko，不論是直接使用或透過平台的網路檢視 API，都不會明確支援。不過，Bootstrap 應該（在大部分情況下）也能在這些瀏覽器中正確顯示和運作。下方提供更詳細的支援資訊。

您可以在 我們的 .browserslistrc 檔案 中找到我們支援的瀏覽器範圍及其版本。

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

我們使用 Autoprefixer 透過 CSS 前綴來處理預期的瀏覽器支援，它使用 Browserslist 來管理這些瀏覽器版本。請參閱其文件，瞭解如何將這些工具整合到您的專案中。

行動裝置

一般來說，Bootstrap 支援每個主要平台預設瀏覽器的最新版本。請注意，代理瀏覽器（例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk）不受支援。

Chrome Firefox Safari Android 瀏覽器和 WebView Microsoft Edge
Android 支援 支援 不適用 支援 Android v5.0+ 支援
iOS 支援 支援 支援 不適用 支援
Windows 10 行動版 不適用 不適用 不適用 不適用 支援

桌上型瀏覽器

類似地，支援大多數桌面瀏覽器的最新版本。

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支援 支援 不適用 支援 支援 支援
Windows 支援 支援 支援，IE10+ 支援 支援 不支援

對於 Firefox，除了最新的正常穩定版本之外，我們還支援 Firefox 的最新 延伸支援版本 (ESR)。

非官方地，Bootstrap 應能在 Linux 的 Chromium 和 Chrome、Linux 的 Firefox 和 Internet Explorer 9 中有良好的外觀和行為，儘管它們未獲得官方支援。

如需查看 Bootstrap 必須應對的一些瀏覽器錯誤清單，請參閱我們的 瀏覽器錯誤牆。

Internet Explorer

支援 Internet Explorer 10+；不支援 IE9 及更早版本。請注意，IE10 中並未完全支援某些 CSS3 屬性和 HTML5 元素，或需要加上前綴屬性才能完全運作。請瀏覽 Can I use… 以取得有關瀏覽器支援 CSS3 和 HTML5 功能的詳細資訊。如果您需要 IE8-9 支援，請使用 Bootstrap 3。

行動裝置上的對話框和下拉選單

溢位和捲動

在 iOS 和 Android 中，<body> 元素上的 overflow: hidden; 支援非常有限。因此，當您在這些裝置的瀏覽器中捲動超過對話框的頂部或底部時，<body> 內容將開始捲動。請參閱 Chrome 錯誤 #175502（已在 Chrome v40 中修復）和 WebKit 錯誤 #153852。

iOS 文字欄位和捲動

從 iOS 9.2 開始，當對話框開啟時，如果捲動手勢的初始觸點在文字 <input> 或 <textarea> 的邊界內，則會捲動對話框下方的 <body> 內容，而不是對話框本身。請參閱 WebKit 錯誤 #153856。

由於 iOS 中 z 索引的複雜性，因此導覽列中不會使用 .dropdown-backdrop 元素。因此，若要關閉導覽列中的下拉選單，您必須直接按一下下拉選單元素（或 任何其他會在 iOS 中觸發按一下事件的元素）。

瀏覽器縮放

頁面縮放不可避免地會在某些元件中呈現出渲染人工製品，這在 Bootstrap 和網路的其他部分中都是如此。根據問題，我們可能會能夠修復它（先搜尋，然後在需要時開啟一個問題）。然而，我們傾向於忽略這些問題，因為它們通常沒有直接的解決方案，除了使用駭客式的解決方法之外。

iOS 上的黏著 :hover/:focus

雖然大多數觸控裝置上無法使用 :hover，但 iOS 模擬此行為，導致「黏著」的 hover 樣式在輕觸一個元素後仍會持續存在。這些 hover 樣式只有在使用者輕觸另一個元素時才會被移除。這種行為被認為在很大程度上是不需要的，而且在 Android 或 Windows 裝置上似乎不是問題。

在我們的 v4 alpha 和 beta 版本中，我們包含了不完整且註解掉的程式碼，以選擇加入媒體查詢 shim，這將在模擬懸停的觸控裝置瀏覽器中停用 hover 樣式。這項工作從未完全完成或啟用，但為了避免完全中斷，我們選擇捨棄 這個 shim，並保留 mixin 作為偽類別的捷徑。

列印

即使在一些現代瀏覽器中，列印也可能很古怪。

從 Safari v8.0 開始，使用固定寬度的 .container 類別可能會導致 Safari 在列印時使用異常小的字體大小。請參閱 問題 #14868 和 WebKit 錯誤 #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>

想看範例嗎？請參閱此 JS Bin 範例。

驗證器

為了提供最佳體驗給舊版且有 Bug 的瀏覽器，Bootstrap 在多個地方使用 CSS 瀏覽器駭客手法，針對特定瀏覽器版本設定特殊 CSS，以解決瀏覽器本身的 Bug。這些駭客手法會導致 CSS 驗證器抱怨它們無效。在幾個地方，我們也使用尚未完全標準化的前瞻性 CSS 功能，但這些功能純粹用於漸進增強。

這些驗證警告在實務上並不重要，因為我們 CSS 的非駭客手法部分完全驗證，而駭客手法部分不會干擾非駭客手法部分的正常運作，因此我們刻意忽略這些特定警告。

我們的 HTML 文件也有一些微不足道的 HTML 驗證警告，因為我們包含了 某個 Firefox Bug 的解決方法。