Rumah >hujung hadapan web >tutorial css >Mengapa Laman Twitter Bootstrap 3 Saya Memaparkan Elemen Mudah Alih dalam IE8 pada Desktop?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-15 02:33:16433semak imbas

Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn