Html Twitter Bootstrap 3 的 IE8 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17947182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 issue with Twitter Bootstrap 3
提问by wrayvon
I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.
我正在使用新的 Twitter Bootstrap 创建一个站点。该站点看起来不错并且可以在除 IE8 之外的所有必需浏览器中运行。
In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.
在 IE8 中，它似乎正在显示移动版本的元素，但在我桌面的全屏上拉伸。我相信我遇到的问题是 Twitter 引导程序首先是移动的。因此，出于某种原因，IE8 将采用此选项。
I also notice that the containerclass does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?
我还注意到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>
回答by Bass Jobsen
You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup
你从 CDN (bootstrapcdn.com) 得到你的 CSS respond.js 只适用于本地文件。因此，请在 IE8 上使用 bootstrap.css 的本地副本尝试您的网站。或阅读： CDN/X-Domain Setup
NoteSee also: https://github.com/scottjehl/Respond/pull/206
注意另见：https: //github.com/scottjehl/Respond/pull/206
Update:
更新：
Please read: http://getbootstrap.com/getting-started/#support
请阅读：http: //getbootstrap.com/getting-started/#support
In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.
此外，Internet Explorer 8 需要使用 respond.js 来启用媒体查询支持。
See also: https://github.com/scottjehl/Respond
另见：https: //github.com/scottjehl/Respond
For this reason the basic template contains these lines in the head section:
出于这个原因，基本模板在 head 部分包含这些行：
<!-- 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]-->
回答by Damian
I also had to set the following META tag:
我还必须设置以下 META 标签：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
回答by Giles Roberts
I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to
从 Bootstrap 2 过渡到 3 时，我遇到了同样的问题。我已经得到了 response.js 和 html5shiv.js 并将我的元设置为边缘。我错过了从 2 到 3 导航栏元素类型发生变化的情况。在 Bootstrap 2 中，它是导航。在 Bootstrap 3 中，它现在是标题。所以要完全解决这个问题，我必须
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Put this right after I'd loaded my css:
在我加载了我的 css 之后把它放好：
<!--[if lt IE 9]>
<script src="~/Content/compatibility/html5shiv.js"></script>
<script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->
and then change
然后改变
<nav class="navbar" role="navigation">
</nav>
to
到
<header class="navbar" role="navigation">
</header>
Oh and for good measure I also added
哦，为了更好的衡量，我还添加了
<meta name="viewport" content="width=device-width, initial-scale=1.0">
simply because that's what the Bootstrap site itself has.
仅仅是因为这就是 Bootstrap 站点本身所拥有的。
回答by pedrusky
In my case, the bootstrap minified CSS was causing the issue. To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:
就我而言，引导程序缩小的 CSS 导致了这个问题。为了使引导程序 3.0.2 在 IE8 中响应（使用 F12 开发人员工具模拟），我必须：
1 - Set the X-UA-Compatible flag.
1 - 设置 X-UA-Compatible 标志。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css
2 - 使用未缩小的 bootstrap.css，而不是 bootstrap.min.css
<link href="/css/bootstrap.css" rel="stylesheet" />
3 - Add the respond.js (and html5shiv.js)
3 - 添加 respond.js（和 html5shiv.js）
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
回答by jignesh kheni
put respond.jsat bottom of page but before closing bodytag and here is link of respond.jsand run this code in your localhost.
放在respond.js页面底部但在关闭body标签之前，这里是respond.js在本地主机中运行此代码的链接。
回答by TenHyman
Just in case. Make sure you load the IE specific js files after you load your css files.
以防万一。确保在加载 css 文件后加载 IE 特定的 js 文件。
回答by Matteo Rossi
As previously stated there are two different problems: 1) IE8 doesn't support media queries 2) respond.js used in conjunction with cross-domain css files must be included as described before.
如前所述，有两个不同的问题：1) IE8 不支持媒体查询 2) 与跨域 css 文件一起使用的 response.js 必须如前所述包含在内。
If you want to use BootstrapCDN here's a working example:
如果你想使用 BootstrapCDN，这里有一个工作示例：
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/respond.proxy.js"></script>
<![endif]-->
Also make sure to copy respond.proxy.gif, respond.min.js and response.proxy.js in local directories
还要确保将 response.proxy.gif、respond.min.js 和 response.proxy.js 复制到本地目录中
回答by Angel Yordanov
Don't forget to place your css links in the <head>as respond.jstakes only those.
不要忘记将您的 css 链接放在<head>asrespond.js只需要那些。
回答by James Climer
After verifying:
验证后：
- DOCTYPE
- X-UA-Compatible meta tag
- Inclusion of html5shiv.js and respond.js (and downloading the latest versions)
- respond.js being local
- Hosting site from a web server and not from File://
- Not using @import
- ...
- 文档类型
- X-UA-兼容元标签
- 包含 html5shiv.js 和 respond.js（并下载最新版本）
- response.js 是本地的
- 来自网络服务器而不是来自 File:// 的托管站点
- 不使用@import
- ...
Still col-lg, col-md, and col-sm were not working. Finally I moved the references to bootstrap to be before the references to html5shiv.js and respond.js and it all worked.
col-lg、col-md 和 col-sm 仍然不起作用。最后，我将 bootstrap 的引用移到了 html5shiv.js 和 respond.js 的引用之前，这一切都奏效了。
Here is a snippet:
这是一个片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Test for IE8</title>
<!-- Moved these two lines up -->
<link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="includes/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5shiv.js"></script>
<script src="includes/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color:red;">col-md-4</div>
<div class="col-md-8" style="background-color:green;">col-md-8</div>
</div>
</div>
</body>
</html>
回答by Dextere
From the explanation it says that IE8 is the standard version for you and making content="IE=edge"will render the page in the highest mode. To make it compatible change it to content="IE=8".
从解释来看，IE8 是您的标准版本，制作content="IE=edge"将以最高模式呈现页面。要使其兼容，请将其更改为content="IE=8".
IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.
IE8 模式支持许多既定标准，包括 W3C Cascading Style Sheets Level 2.1 Specification 和 W3C Selectors API；它还为 W3C 级联样式表级别 3 规范（工作草案）和其他新兴标准提供有限的支持。
边缘模式告诉 Internet Explorer 以可用的最高模式显示内容。对于 Internet Explorer 9，这相当于 IE9 模式。如果 Internet Explorer 的未来版本支持更高的兼容性模式，则设置为边缘模式的页面将以该版本支持的最高模式显示。当使用 Internet Explorer 9 查看时，这些相同的页面仍会出现在 IE9 模式下。
Reference What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
参考<meta http-equiv="X-UA-Compatible" content="IE=edge"> 有什么作用？
