Home > Web Front-end > CSS Tutorial > Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a Desktop?

Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a Desktop?

Patricia Arquette
Release: 2024-12-15 02:33:16
Original
431 people have browsed it

Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a Desktop?

IE8 with Twitter Bootstrap 3 Issue

Problem Description

Twitter Bootstrap 3 displays mobile site elements in IE8, despite running on a desktop. The problem seems to stem from IE8 selecting the mobile version, possibly due to Bootstrap's mobile-first design. Additionally, the container class does not appear to be applying max-width CSS properties correctly.

HTML Code

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown"></span>
                    <ul class="dropdown-menu">
                        ...
                    </ul>
                </div>
                ...
                <div class="topNav">
                    <ul class="hidden-sm">
                        ...
                        <li>
                            <a href="#">
                                <button type="button" class="btn btn-default">Where to Buy</button>
                            </a>
                        </li>
                    </ul>
                </div>
                ...
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">
            ...
            <div class="navi">
                <div class="navbar">
                    <div class="container">
                        ...
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                ...
                                <li>
                                    <a href="#">
                                        <button type="button" class="btn btn-default">Where to Buy</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
Copy after login

CSS Code

.container {
    max-width: 960px;
}
Copy after login

Answer

The issue arises because the code uses CDN-hosted CSS files, which are not compatible with IE8's Respond.js for enabling media query support.

Solution

To resolve the issue, follow these steps:

  1. Use local copies of Bootstrap CSS files instead of CDN-hosted ones.
  2. Ensure that the HTML contains the following lines in the section:
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
Copy after login

The above is the detailed content of Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a Desktop?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template