ホームページ >ウェブフロントエンド >CSSチュートリアル >私の Twitter Bootstrap 3 Web サイトが IE8 でモバイル バージョンを表示するのはなぜですか? `container` クラスの `max-width` の問題を解決するにはどうすればよいですか?
Twitter Bootstrap 3 と IE8 の互換性の問題
問題:
最新のものを使用していますTwitter Bootstrap を使用して Web サイトを構築します。このサイトは、IE8 を除くすべての必要なブラウザで正常に表示されます。
IE8 では、要素のモバイル バージョンが表示されているように見えますが、デスクトップ画面の幅全体に引き伸ばされています。私が抱えている問題は、Twitter Bootstrap がモバイルファーストであることだと思います。何らかの理由で、IE8 ではこのオプションが採用されています。
コンテナ クラスが期待どおりに max-width CSS プロパティを取得していないように見えることにも気付きました。私が何を間違えたのか教えてください。
質問コード:
<!-- 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 class="topArea clearfix"> <div class="container"> <div class="topLinks"> <div class="btn-group"> <span class="flag" data-toggle="dropdown"> </span> <ul class="dropdown-menu"> <li><a href="#">Country 1</a></li> <li><a href="#">Country 2</a></li> <li><a href="#">Country 3</a></li> <li class="divider"></li> <li><a href="#">Country 4</a></li> <li><a href="#">Country 5</a></li> <li><a href="#">Country 6</a></li> </ul> </div> <div class="visible-sm btn-group"> <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div> <ul class="dropdown-menu"> <li><a href="#">Parts & Service</a></li> <li><a href="#">Store Locator</a></li> <li><a href="#">Find a Service Centre</a></li> <li><a href="#">Parts List</a></li> <li><a href="#">Tool Vibration</a></li> <li><a href="#">Resource Centre</a></li> <li><a href="#">Media Centre</a></li> <li><a href="#">Register your Tools</a></li> <li><a href="#">About Us</a></li> <li><a href="#"> <button type="button" class="btn btn-default">Where to Buy</button></a></li> </ul> </div> <div class="topNav"> <ul class="hidden-sm"> <li> <div class="btn-group"> <a href="#" data-toggle="dropdown">Parts & Service</a> <ul class="dropdown-menu"> <li><a href="#">Store Locator</a></li> <li><a href="#">Find a Service Centre</a></li> <li><a href="#">Parts List</a></li> <li><a href="#">Tool Vibration</a></li> </ul> </div> </li> <li><a href="#">Resource Centre</a></li> <li><a href="#">Media Centre</a></li> <li><a href="#">Register your Tools</a></li> <li><a href="#">About Us</a></li> <li><a href="#"> <button type="button" class="btn btn-default">Where to Buy</button></a></li> </ul> </div> <div class="searchArea"> <input type="text" /> <a href="#" class="goBtn">GO</a> </div> </div> </div> </div> <div class="mainNavArea"> <div class="container rel"> <div class="logo"> <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" /> </div> <div class="navi"> <div class="navbar"> <div class="container"> <!-- .navbar-toggle is used as the toggle for collapsed navbar content --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Place everything within .navbar-collapse to hide it until above 768px --> <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav nav-justified"> <li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Power Tools</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> <li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Hand Tools</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> <li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div>
以上が私の Twitter Bootstrap 3 Web サイトが IE8 でモバイル バージョンを表示するのはなぜですか? `container` クラスの `max-width` の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。