Bootstrap Nav Bar没有工作ie

时间:2013-01-26 00:41:29

标签: html css twitter-bootstrap

我使用bootstrap创建了一个网站,主要用于学习目的。我正在使用<div class="navbar navbar-inverse">。我把我的网站放到服务器上,并让我的一些朋友检查出来。每个人都打来电话,说它看起来很棒,但后来有人说当他使用Internet Explorer时一切都乱七八糟(不知道究竟是什么版本,但绝对是旧版本)我在网络浏览器上尝试过,导航栏混乱不堪。

列表项不是内联的。酒吧的大小应该是它的两倍,文字用下划线和紫色......

过去几天我一直试图解决这个问题,但我不能。我应该如何让我的网站在每个浏览器中表现得足够相似,这样它看起来不会破碎?

这真的令人沮丧,我准备接受任何来源1.了解这一点和2.解决这个问题。

谢谢!

HTML代码:

<html>
<head>
    <!--[if lt IE 9]-->
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <!--[endif]-->
    <title> College GPA </title>
    <link rel = 'stylesheet' type = 'text/css' href = "assets/css/style.css">
    <link rel = 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <script src = "assets/js/dropdown.js">
    </script>
    <script> 
        $(".dropdown-toggle").dropdown();
    </script>

</head>


<body>
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <div class="container">

              <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
              <a 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>
              </a>

              <!-- Be sure to leave the brand out there if you want it shown -->
              <a class="brand" href="#" style = "font-size: 23px;">LOGO</a>

              <!-- Everything you want hidden at 940px or less, place within here -->
             <div class="nav-collapse collapse">
                <!-- .nav, .navbar-search, .navbar-form, etc -->
                <ul class = "nav">
                    <li class = 'active'> <a href = "#"> Home </a></li>
                    <li class = 'dropdown'> 
                        <a href = "#" class = 'dropdown-toggle' id = "dLabel" data-toggle = "dropdown">Drop Down <b class = 'caret'> </b></a>
                        <ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
                            <li> <a href = "#">Drop Down 1 </a> </li>
                            <li> <a href = "#">Drop Down 2 </a> </li>
                            <li> <a href = "#"> Drop Down 3</a> </li>
                        </ul>
                    </li>
                    <li class = 'dropdown'> 
                        <a href = "#" class = 'dropdown-toggle' id = "dLabel" data-toggle = "dropdown">Drop Down  <b class = 'caret'> </b></a>
                        <ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
                            <li> <a href = "#"> Drop Down 1   </a> </li>
                            <li> <a href = "#"> Drop down 2 </a> </li>

                        </ul>
                    </li>

                </ul>
         </div>

    </div>
  </div>
    </div>


    <div class = 'wrapper'>



    </div>


</body>

</html>

1 个答案:

答案 0 :(得分:2)

你不知道他使用的是什么版本也没什么用...也许你应该问他?如果它足够老,则引导程序可能不支持它(IE <7)。

如果是这种情况,请忽略它。很少有公司仍然支持旧版本的IE,而那些确实有特定原因的公司。

如果您正在寻找一种处理旧浏览器的好方法,也许您可​​以显示升级到较新浏览器的选项,以及可能无法在浏览器中正确显示的警告。

http://gs.statcounter.com/是获取旧浏览器使用情况统计信息的好来源。从那里你可以决定你是否真的想要支持它们。

最后,您可以随时查看您网站的分析(如果您碰巧拥有流量的现有分析),看看是否值得花时间维护对旧浏览器的支持。