Twitter Bootstrap 3的IE8问题
韩嘉胜
问题内容：
问题答案：
我正在使用新的Twitter Bootstrap创建一个网站。该网站看起来不错，并且可以在除IE8之外的所有必需浏览器中使用。
在IE8中，它似乎在显示移动版本的元素，但延伸到了我的桌面的全屏。我认为我遇到的问题是Twitter引导程序首先是移动设备。因此出于某些原因，IE8会选择此选项。
我还注意到，container该类似乎并未按预期引入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>
<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]-->
类似资料：
-
本文向大家介绍IE8兼容Jquery.validate.js的问题，包括了IE8兼容Jquery.validate.js的问题的使用技巧和注意事项，需要的朋友参考一下 只需在jquery.validate.js 文件中 在446行附近找到 return $([]).add(this.currentForm.elements).filter(":input") 更换成 以上就是本文的全部内容，希望对
-
问题内容： 我正在尝试制作EXTJS应用程序以发送带有附件的电子邮件。因此，我有一个非常基本的表单，其中包括主题的文本字段，带有inputType：附件的’file’的另一个文本字段以及html编辑器。 并将此表单放置在将提交给服务器的窗口中： 当我使用FF将表单提交到服务器时，一切工作都很好。但是IE8会出现问题。IE显示安全栏，表示我正在尝试将文件下载到计算机，这与我正在做的事情（我正在上传文
-
问题内容： 我有一个HTML表单（ upload.htm ），其中包含HTML文件上传控件。 上一页中还有一个JavaScript方法，如下所示： 我在一个页面内的页面（ uploadpage.htm ）中 称其 为： 我尝试从 uploadpage.htm 页面执行以下所示的语句： 我收到一条错误消息，说 Access被拒绝，并且调试器在显示的第一个JavaScript函数处停止。这两个文件都位
-
问题内容： 我在singleWindow模式和IE8中运行Selenium。 如果我手动启动IE8，则将设置IE8模式，但是当我使用Selenium启动它时，使用兼容模式将模式设置为IE7。 有谁知道为什么使用Selenium启动浏览器时兼容模式不是IE8视图？ 或者，如何才能完全禁用IE中的兼容模式并强制其始终使用IE8视图？ 问题答案： 我给问题+1是因为这是一个非常好的问题-如何做到这一点并
-
本文向大家介绍IE8下Jquery获取select选中的值post到后台报错问题，包括了IE8下Jquery获取select选中的值post到后台报错问题的使用技巧和注意事项，需要的朋友参考一下 我们一般使用jquery获取select时，一般这么用： 在非IE8下，selectedValue的值为“1”，typeof selectedValue 为“string”。 在IE8下，selected
-
问题内容： 这是我的CSS： 工作，现在到处（用这个在我的网站），除了Internet Explorer 8中...... 是否有可能在IE8中使用nth-child？这是该浏览器的最差版本，无法正常工作，我找不到解决方法。 @ edit2：我刚刚注意到 实际上是在IE8中工作！但是这个： 不管用。那么发生了什么？ 问题答案： 您可以（ab）使用相邻的同级组合器（）通过可在IE7/ 8中使用的CS