Why is my Twitter Bootstrap 3 website displaying the mobile version in Internet Explorer 8, and how can I fix the `max-width` issue on the container class?

Twitter Bootstrap 3 problem in Internet Explorer 8

Question content:

I am Create a website using the new Twitter Bootstrap. This website displays and works properly in all required browsers except IE8.

In IE8 it appears to display the mobile version of the element but stretched to the full screen of the desktop monitor. I believe the problem I'm having is that Twitter Bootstrap is mobile first. So, for some reason, IE8 uses this option.

I also noticed that the container class doesn't seem to get the max-width CSS property as expected. Can anyone see what I'm doing wrong?

Code:

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div>

The above is the detailed content of Why is my Twitter Bootstrap 3 website displaying the mobile version in Internet Explorer 8, and how can I fix the `max-width` issue on the container class?. For more information, please follow other related articles on the PHP Chinese website!