내 Twitter Bootstrap 3 사이트가 데스크탑의 IE8에서 모바일 요소를 표시하는 이유는 무엇입니까?

Twitter Bootstrap 3 문제가 포함된 IE8

문제 설명

Twitter Bootstrap 3은 모바일 사이트를 표시합니다. 데스크탑에서 실행됨에도 불구하고 IE8의 요소. 문제는 IE8이 모바일 버전을 선택하는 데서 비롯된 것 같습니다. 아마도 Bootstrap의 모바일 우선 설계 때문일 것입니다. 또한 컨테이너 클래스가 최대 너비 CSS 속성을 올바르게 적용하지 않는 것 같습니다.

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>

CSS 코드

.container {
    max-width: 960px;
}

답변

코드가 IE8의 Respond.js와 호환되지 않는 CDN 호스팅 CSS 파일을 사용하기 때문에 문제가 발생합니다. 미디어 쿼리 support.

솔루션

문제를 해결하려면 다음 단계를 따르세요.

1. CDN 대신 Bootstrap CSS 파일의 로컬 복사본을 사용하세요.
2. HTML의 섹션:

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

위 내용은 내 Twitter Bootstrap 3 사이트가 데스크탑의 IE8에서 모바일 요소를 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!