Mengapa Laman Twitter Bootstrap 3 Saya Memaparkan Elemen Mudah Alih dalam IE8 pada Desktop?

IE8 dengan Twitter Bootstrap 3 Isu

Penerangan Masalah

Twitter Bootstrap 3 memaparkan tapak mudah alih elemen dalam IE8, walaupun berjalan pada desktop. Masalahnya nampaknya berpunca daripada IE8 memilih versi mudah alih, mungkin disebabkan reka bentuk Bootstrap yang mengutamakan mudah alih. Selain itu, kelas kontena nampaknya tidak menggunakan sifat CSS lebar maksimum dengan betul.

Kod HTML

<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>

Kod CSS

.container {
    max-width: 960px;
}

Jawapan

Isunya timbul kerana kod tersebut menggunakan fail CSS yang dihoskan CDN, yang tidak serasi dengan Respond.js IE8 untuk mendayakan sokongan pertanyaan media.

Penyelesaian

Untuk menyelesaikan isu, ikut langkah berikut:

1. Gunakan salinan setempat fail CSS Bootstrap dan bukannya Yang dihoskan CDN.
2. Pastikan HTML mengandungi baris berikut dalam bahagian:

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

Atas ialah kandungan terperinci Mengapa Laman Twitter Bootstrap 3 Saya Memaparkan Elemen Mudah Alih dalam IE8 pada Desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!