Twitter引导程序无法在Internet Explorer中正确显示

时间:2012-09-24 17:13:53

标签: html css internet-explorer twitter-bootstrap

在Internet Explorer中查看twitter bootsrap网站时遇到重大问题。 http://warningweather.com/是网站...下面是Chrome缩略图,然后是IE缩略图,然后是HTML代码。导航栏在Internet Explorer中显示为自上而下列表,并且跨度在Internet Explorer中自上而下显示。我希望它看起来像在Chrome中一样。

Chrome屏幕截图 Chrome Screenshot

Internet Explorer屏幕截图 Internet Explorer Screenshot

<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 &raquo;</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, Jackson 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 &raquo;</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 &raquo;</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>&copy; 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>

2 个答案:

答案 0 :(得分:3)

这是因为您的网站让IE进入IE中的怪癖模式。

  1. 您忘记关闭第二个css链接的“”标记 - &gt;的rel =“样式表\
  2. 我猜第二个错误是你在脚本和css链接后有meta标签。尝试更改它们的订单,首先应放置元标记。

答案 1 :(得分:1)

使用IE Developer工具。 我可以看到IE正在搜索的很多js文件无法找到。我附上了截图,显示了404错误。

chrome / firefox正确渲染其余部分,留下丢失的文件。然而,当它没有找到一些文件时,IE就会中断,因此在IE上看起来很混乱

enter image description here