我正在使用新的Twitter Bootstrap创建一个网站。该网站看起来不错，并且可以在除IE8之外的所有必需浏览器中使用。
在IE8中，它似乎在显示移动版本的元素，但延伸到了我的桌面的全屏。我认为我遇到的问题是Twitter引导程序首先是移动设备。因此出于某些原因，IE8会选择此选项。
我还注意到，container该类似乎并未按预期引入max-width CSS属性。谁能看到我做错了什么？
container
<!-- 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> <div class="col-12 col-sm-8 col-lg-8"> <h2>Test & Measurement</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">Accessories</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>Accessories</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> </ul> </div> <!-- /.nav-collapse --> </div> <!-- /.container --> </div> <!-- /.navbar --> </div> </div> </div> </header>
您从CDN（bootstrapcdn.com）获得了CSS，response.js仅适用于本地文件。因此，请使用bootstrap.css的本地副本在IE8上尝试您的网站。或阅读：CDN / X域设置
更新：
另外，Internet Explorer 8需要使用response.js来启用媒体查询支持。
因此，基本模板的头部包含以下几行：
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->
