Bootstrap: Hỗ trợ các trình duyệt và các thiết bị

Bootstrap được xây dựng để hoạt động ổn định nhất với các trình duyệt mới nhất trên máy tính để bàn và các thiết bị di động, điều đó có nghĩa là các trình duyệt cũ có thể hiển thị các style khác đi mặc dù vẫn có đầy đủ chức năng khi các thành phần được tạo ra.

Các trình duyệt được hỗ trợ

Cụ thể, chúng tôi hỗ trợ phiên bản mới nhất cho các trình duyệt và nền tảng sau đây. Trên Windows, chúng tôi hỗ trợ các trình duyệt từ IE8-IE11. Hãy xem bảng bên dưới để biết thêm chi tiết.

Bootstrap cũng hoạt động tốt trên các trình duyệt Chromium và trình duyệt Chrome trong Linux, Firefox trong Linux và Internet Explorer 7, mặc dù các trình duyệt này không được hỗ trợ một cách chính thức.

Để xem danh sách các lỗi trình duyệt mà Bootstrap gặp phải, hãy tham khảo phần Lỗi trình duyệt.

Trình duyệt Internet Explorer 8 và 9

Trình duyệt Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên có một số thuộc tính CSS và phần tử HTML5 không được hỗ trợ một cách đầy đủ trên các trình duyệt này. Ngoài ra, Trình duyệt Internet Explorer 8 đòi hỏi việc sử dụng Respond.js để hỗ trợ cho media query.

Hãy tham khảo Can I use... để biết thêm chi tiết về các tính năng CSS3 và HTML5 mà trình duyệt hỗ trợ.

Trình duyệt Internet Explorer 8 và Respond.js

Hãy cẩn thận với các vấn đề khi sử dụng Respond.js trong môi trường phát triển và triển khai cua bạn trên trình duyệt Internet Explorer 8.

Respond.js và cross-domain CSS

Việc sử dụng Respond.js cùng với CSS được lưu trữ trên một (sub)domain khác (ví dụ như trên CDN) đòi hỏi thêm một số thiết lập. Hãy tham khảo tài liệu về Respond.js để biết thêm chi tiết.

Respond.js and file://

Do các quy tắc bảo mật của trình duyệt, Respond.js sẽ không hoạt động với những trang được truy cập thông qua giao thức file:// (giống như khi mở một tập tin HTML trên máy tính của bạn). Để kiểm thử tính năng responsive trên trình duyệt IE8, hãy xem trang của bạn được truy cập thông qua giao thức HTTP(S). Hãy tham khảo tài liệu Respond.js để biết thêm chi tiết.

Respond.js and @import

Respond.js không hoạt động với CSS được tham chiếu bằng @import. Tuy nhiên, một vài thiết lập cấu hình của Drupal có thể sử dụng @import. Hãy tham khảo tài liệu Respond.js để biết thêm chi tiết.

Trình duyệt Internet Explorer 8 và box-sizing

Trình duyệt IE8 không hỗ trợ thuộc tính box-sizing: border-box; một cách đầy đủ khi kết hợp cùng với min-width, max-width, min-height, hoặc max-height. Vì lý do đó, trong phiên bản v3.0.1, chúng tôi không còn sử dụng max-width trên các .container nữa.

Các chế độ tương thích với trình duyệt Internet Explorer

Bootstrap không được hỗ trợ một cách đầy đủ trên các trình duyệt IE cũ. Để chắc chắn rằng bạn đang sử dụng chế độ render mới nhất trong IE, hãy thêm thẻ <meta> thích hợp vào các trang của bạn:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Xác nhận chế độ document bằng cách mở các công cụ debug: Hãy nhấn F12 và click vào mục "Document Mode".

Thẻ này đã được tích hợp sẵn trong toàn bộ các ví dụ và tài liệu hướng dẫn sử dụng của Bootstrap để đảm bảo việc render tốt nhất trên mỗi phiên bản Internet Explorer.

Hãy tham khảo câu hỏi StackOverflow này để biết thêm chi tiết.

Trình duyệt Internet Explorer 10 trong Windows 8 và Windows Phone 8

Trình duyệt Internet Explorer 10 không phân biệt chiều rộng của thiết bị với chiều rộng của khung nhìn, và vì vậy, nó sẽ không áp dụng các media query một cách thích hợp. Thông thường, bạn chỉ phải thêm một đoạn mã ngắn CSS để sửa lỗi này:

@-ms-viewport       { width: device-width; }

Tuy nhiên, đoạn mã trên không hoạt động với các thiết bị chạy các phiên bản Windows Phone 8 cũ hơn Update 3 (a.k.a. GDR3). Vì thế, nó sẽ gây ra lỗi hiển thị khung nhìn của desktop thay vì khung nhìn hẹp của điện thoại. Để giải quyết vấn đề này, bạn sẽ phải tích hợp thêm mã CSS và Javascript sau.

@-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.querySelector('head').appendChild(msViewportStyle)
}

Để biết thêm thông tin chi tiết và hướng dẫn sử dụng, hãy tham khảo Windows Phone 8 và chiều rộng của thiết bị.

Theo mặc định, chúng tôi đã tích hợp sẵn các đoạn mã này vào toàn bộ các ví dụ và tài liệu của Bootstrap.

Vấn đề làm tròn tỷ lệ phần trăm trong trình duyệt Safari

Khi sử dụng trình duyệt Safari phiên bản v7.0.1 trên hệ điều hành OS X và trình duyệt Safari trên hệ điều hành iOS v7.0.1, bộ máy render của Safari có một số vấn đề với số lượng các chữ số thập phân được sử dụng trong các class lưới .col-*-1 của chúng tôi. Vì thế, nếu bạn có một hệ thống lưới gồm 12 cột, bạn sẽ để ý thấy chúng có chiều rộng ngăn hơn so với các hàng của cột khác (Hãy xem #9282). Bạn có một vài tùy chọn để giải quyết vấn đề này:

• Thêm class .pull-right vào cột cuối cùng trong hệ thống lưới để thực hiện căn phải một cách bắt buộc
• Tinh chỉnh tỷ lệ phần trăm của bạn bằng tay (khó hơn rất nhiều so với tùy chọn 1)

Chúng tôi sẽ luôn theo dõi vấn đề này và sẽ cập nhật giải pháp ngay khi chúng tôi tìm ra.

Modal, thanh điều hướng và bàn phím ảo

Overflow và scrolling

Việc hỗ trợ thuộc tính overflow: hidden trên phần tử <body> bị giới hạn trên trên iOS và Android. Để chấm dứt vấn đề này, khi bạn cuộn qua mép trên hoặc mép dưới của một modal trên các trình duyệt của những thiết bị sử dụng iOS hoặc Android, nội dung của <body> sẽ bắt đầu cuộn xuống.

Bàn phím ảo

Ngoài ra, lưu ý rằng nếu bạn sử dụng input trong các modal hoặc thanh điều hướng của bạn, iOS có một lỗi render là không cập nhật vị trí của các phần tử cố định khi bàn phím ảo được kích hoạt. Một số giải pháp cho vấn đề này bao gồm việc biến đổi các phần tử của bạn thành position: absolute hoặc kích hoạt một timer khi focus để cố gắng sửa vị trí một cách thủ công. Vấn đề này không được xử lý bởi Bootstrap, vì thế bạn cần tự quyết định xem giải pháp nào là phù hợp vói nhu cầu của bạn.

Menu sổ xuống nằm trong thanh điều hướng

Phần tử .dropdown-backdrop không được sử dụng trong các thành phần điều hướng trên iOS do sự phức tạp của thuộc tính z-index. Vì thế, để đóng một menu sổ xuống trong thanh điều hướng, bạn phải click trực tiếp vào phần tử menu sổ xuống (hoặc các phần tử khác sẽ kích hoạt sự kiện click trong iOS).

Phóng to trong trình duyệt

Khi phóng to một trang web trên trình duyệt, sẽ không thể tránh khỏi việc các thành phần bị hiển thị lỗi. Tùy thuộc vào từng vấn đề, chúng tôi có thể giải quyết được nó (trước hết là tìm kiếm và sau đó là mở ra một issue nếu cần). Tuy nhiên, chúng tôi có thiên hướng bỏ qua các vấn đề này vì dường như không có giải pháp trực tiếp nào tốt hơn giải pháp "hack".

Khung nhìn khi in ấn

Thậm chí trên các trình duyệt hiện đại, việc in ấn nhiều khi được thực hiện hơi kỳ quặc. Cụ thể, như trong trình duyệt Chrome phiên bản v32, bất kể thiết lập margin như thế nào, Chrome sử dụng một khung nhìn có chiều rộng hẹp hơn đáng kể so với kích thước thực tế của một tờ giấy khi xử lý các media query trong khi in một trang nào đó. Điều này có thể dẫn đến dạng extra-small trong hệ thống lưới hiển thị không như mong muốn. Hãy tham khảo issue #12078 để biết thêm chi tiết. Chúng tôi gợi ý một số giải pháp như sau:

• Hạn chế sử dụng lưới dạng extra-small và chắc chắn rằng trang web của bạn trông có thể chấp nhận được.
• Tùy chỉnh giá trị của các biến số Less @screen-* để tờ giấy in của bạn trong có vẻ lớn hơn kích thước extra-small.
• Thêm các media query tùy biến để thay đổi các mốc kích thước trong lưới chỉ trong trường hợp phục vụ in ấn.

Trình duyệt trên Android

Ngoài ra, Hệ điều hành Android 4.1 (và thậm chí các phiên bản mới hơn) luôn đi kèm với một ứng dụng trình duyệt mặc định (đối lập với Chrome). Thật không may, ứng dụng trình duyệt đó luôn có rất nhiều lỗi và không đồng nhất với CSS nói chung.

Các menu select

Trên các phần tử <select>, các trình duyệt đi kèm với hệ điều hành Android không hiển thị mũi tên điều khiển phía bên phải nếu như có thuộc tính border-radius và/hoặc border được sử dụng. (Hãy tham khảo câu hỏi StackOverflow này để biết thêm chi tiêt.) Hãy sử dụng đoạn mã sau đây để loại bỏ CSS và hiển thị <select> như một phần tử không được style trên các trình duyệt đi kèm với Android. User-agent tránh xung đột với các trình duyệt Chrome, Safari và 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>

Nếu bạn muốn thấy một ví dụ cụ thể, hãy tham khảo vấn đề này trên JS Bin.