twitter-bootstrap Twitter Bootstrap 无法在 Internet Explorer 中正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12569748/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 15:24:04 来源:igfitidea点击:
Twitter Bootstrap Not Displaying Correctly in Internet Explorer
提问by Zachary Lassiter
Having major problems getting a twitter bootsrap site to be viewable in Internet Explorer. http://warningweather.com/is the site... below is a chrome thumbnail then an IE thumbnail and then the HTML code. The navbar is appearing as a topdown list in Internet Explorer and the spans are appearing from top down in internet explorer. I want it to look like it does in Chrome.
在 Internet Explorer 中查看 twitter bootsrap 站点时遇到重大问题。 http://warningweather.com/是该站点...下面是 chrome 缩略图，然后是 IE 缩略图，然后是 HTML 代码。导航栏在 Internet Explorer 中显示为自上而下的列表，跨度在 Internet Explorer 中显示为自上而下。我希望它看起来像在 Chrome 中一样。
Chrome Screenshot
Chrome 截图
Internet Explorer Screenshot
Internet Explorer 屏幕截图
<html lang="en">
<head>
<meta charset="utf-8">
<title>Severe Weather Warnings - Torando Warning, Thunderstorm Warning</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/css/bootstrap-responsive.css" rel="stylesheet\ type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=182733995114522";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<meta property="og:image" content="http://warningweather.com/tornado.gif"/>
<meta property="og:title" content="Severe Weather Warnings - Torando Warning, Thunderstorm Warning"/>
<link rel="canonical" href="http://warningweather.com" />
<meta property="og:url" content="http://warningweather.com"/>
<meta property="og:site_name" content="Warning Weather"/>
<meta property="og:description" content="The Latest Weather Warnings from the National Weather Service"/>
<meta property="fb:app_id" content="182733995114522" />
<meta name="description" content="The Latest Weather Warnings from the National Weather Service " />
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://warningweather.com">Warning Weather</a>
<div class="nav-collapse collapse">
<ul class="nav"><li class="active">
<a href="http://warningweather.com">Home</a>
</li>
<li><a href="http://warningweather.com/about/">About</a></li>
<li><a href="http://warningweather.com/recent">Recent</a></li><li><a href="http://warningweather.com/blog">Announcements</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<center>
<p class="hidden-phone">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5504765881600837";
/* WarnWeather Top Banner */
google_ad_slot = "0759690849";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center></p>
<div class="hero-unit">
<h1>Warning of the Latest Weather...</h1>
<p>With Warning Weather you can keep your readers and viewers in the know with weather warnings from the national weather service automatically being posted to your facebook page, twitter feed, and even website!</p>
<p><a class="btn btn-primary btn-large" href="http://warningweather.com/customer">Learn more »</a></p>
</div>
<center><strong><a href="http://warningweather.com/day/September-24-2012">Warnings Today</a> | <a href="http://warningweather.com/day/September-23-2012">Warnings Yesterday</a></center></strong><BR />
<div class="row">
<div class="span4">
<h2>Recently Issued</h2>
<ul><li><strong><a href="http://warningweather.com/view/2012-KLZK-SV-W-0456@Severe-Thunderstorm-Warning">Severe Thunderstorm Warning for Independence AR, Hymanson AR, White AR, Woodruff AR,</a> </strong><BR><i>Expired: 2012-09-24 13:00:00 UTC</i></li><li><strong><a href="http://warningweather.com/view/2012-KCRP-SV-W-0146@Severe-Thunderstorm-Warning">Severe Thunderstorm Warning for La Salle TX,</a> </strong><BR><i>Expired: 2012-09-24 02:00:00 UTC</i></li><li><strong><a href="http://warningweather.com/view/2012-KPHI-SV-W-0237@Severe-Thunderstorm-Warning">Severe Thunderstorm Warning for Kent DE, New Castle DE, Cumberland NJ, Salem NJ,</a> </strong><BR><i>Expired: 2012-09-23 01:45:00 UTC</i></li><li><strong><a href="http://warningweather.com/view/2012-KPHI-SV-W-0236@Severe-Thunderstorm-Warning">Severe Thunderstorm Warning for Burlington NJ, Camden NJ, Gloucester NJ, Bucks PA, Delaware PA, Philadelphia PA,</a> </strong><BR><i>Expired: 2012-09-23 00:45:00 UTC</i></li><li><strong><a href="http://warningweather.com/view/2012-KPBZ-SV-W-0208@Severe-Thunderstorm-Warning">Severe Thunderstorm Warning for Allegheny PA, Armstrong PA, Butler PA, Westmoreland PA,</a> </strong><BR><i>Expired: 2012-09-23 00:00:00 UTC</i></li></ul> <p><a class="btn" href="http://warningweather.com/recent">More Weather Warnings »</a></p>
</div>
<div class="span4">
<h2>Currently Valid</h2>
<p>The National Weather Service currently has 0 currently valid severe thunderstorm warnings and 0 Tornado Warnings. Keep your viewers safe, and engaged by automatically putting these warnings on your facebook page, twitter feed and website!</p>
<p>If your viewers and readers know they can come to you for the latest Weather Warnings to keep themselves and their loved ones safe they will, they will stay engaged and coming back for more... its that easy!</p><p><strong>Great for Television Stations, Local Governments, Newspapers, Weather Related Siets, and more!</strong></p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2></h2>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5504765881600837";
/* WarnWeather Big Square */
google_ad_slot = "8412928525";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<hr>
<footer>
<p>© 2012 Zesty Labs; Warning Data by National Weather Service</p>
<p><a href="http://warningweather.com/recent/tornado">Recent Thunderstorm Warnings Warnings</a> | <a href="http://warningweather.com/recent/thunderstorm">Recent Thunderstorm Warnings</a> | <a href="http://warningweather.com/recent">Recent Weather Warnings</a></p>
</footer>
</div>
<!-- Twitter Bootstrap Stuff -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29669116-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=7261892;
var sc_invisible=1;
var sc_security="d71e143e";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="tumblr hit
counter" href="http://statcounter.com/tumblr/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/7535508/0/7df33614/1/"
alt="tumblr hit counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>
回答by Caelea
It's because your site makes IE to get into quirks mode in IE.
这是因为您的网站使 IE 在 IE 中进入怪癖模式。
- You forgotten to close the "" marks for your second css links-> rel="stylesheet\
- I'm guessing the second mistake is that you have meta tags after script and and css links. Try to change the orders for them, meta tags should be placed first.
- 您忘记关闭第二个 css 链接的 "" 标记-> rel="stylesheet\
- 我猜第二个错误是在脚本和 css 链接之后有元标记。尝试更改它们的顺序，应首先放置元标记。
回答by Roopak Venkatakrishnan
USe IE Developer tools. I can see that a lot of js files that IE is searching for it cant find. I have attached a screenshot below showing 404 errors.
使用 IE 开发者工具。我可以看到很多 IE 正在搜索的 js 文件都找不到。我在下面附上了显示 404 错误的屏幕截图。
chrome/firefox renders the rest correctly leaving the missing files. IE however just breaks when it doesnt find some files and hence the messed up look on IE
chrome/firefox 正确呈现其余部分，留下丢失的文件。但是，IE 在找不到某些文件时会中断，因此在 IE 上看起来很混乱
