Why Does IE8 Display Twitter Bootstrap 3's Mobile Version on Desktop, and How Can I Fix It?

IE8 With Twitter Bootstrap 3

In this webpage, we'll explore the issue of using Twitter Bootstrap 3 with the IE8 browser.

IE8 Issue Description

The user in question encountered an issue when using Twitter Bootstrap 3 in a website. While the website functioned properly in all other required browsers, IE8 displayed elements from the mobile version of Bootstrap, stretched across the full screen of the desktop.

The user identified the problem as IE8 favoring mobile-first design in Twitter Bootstrap. Additionally, the max-width CSS properties were not being pulled in by the container class as intended.

Solution

To resolve this issue, the user needs to utilize the respond.js library, which enables media query support in IE8. This is because Bootstrap requires media query support to function correctly.

Steps to Implement the Solution

1. Include the following lines in the head section of your HTML document:

<!--[if lt IE 9]>
  <script src="path/to/respond.min.js"></script>
<![endif]-->

2. Replace "path/to/respond.min.js" with the actual path to the respond.min.js library.
3. Alternatively, include the following CSS in the head section to target IE8 and below:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .container {
    max-width: none;
  }
}

4. Additionally, you can use a local copy of the bootstrap.css file instead of linking to it from a CDN, as respond.js only works for local files.

Additional Information

• For further reference, visit: https://getbootstrap.com/getting-started/#support, specifically the section on IE8 support using respond.js.
• See: https://github.com/scottjehl/Respond for more information on the respond.js library.

The above is the detailed content of Why Does IE8 Display Twitter Bootstrap 3's Mobile Version on Desktop, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!