使用Twitter Bootstrap 3.3.4在IE 8中导航条看起来不对

时间：2015-04-13 13:50:12

标签： css twitter-bootstrap internet-explorer

好的，我在前面道歉它有一个类似的问题，到目前为止我已经尝试了所有内容，我已经阅读过了！也许还有别的我想念的东西。这将是我的第一个直播Bootstrap网站。我在测试域上有几页。

它在所有现代浏览器中看起来都很棒，我的问题是IE（当然），它看起来很好，即9但导航栏看起来很好，在IE 8中很糟糕，（我不关心ie7！我至少会喜欢它在IE 8中看起来没问题。

基于其他博客帖子，我已经将以下内容包含在我网站的源代码头中，以帮助呈现旧版本的IE：

<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

以下是测试网站网址：www.amystout.com/meridian/irrigation.html

以下是导航栏在IE 8中“错误地”显示的方式，

IE nav bar example

Flickr page

以下是该页面的代码：

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19558625-1']);
_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);
})();
body {
    background-color: #C4C0BF;
    background-image:url(../images/background_light_slice.jpg);
    background-repeat:repeat-x
}
.glow {
    background-image:url(../images/background_light.jpg);
    background-repeat:no-repeat;
}
#logo-box img {
    border:none;
    margin-top: 25px;
}
.slogan {
    float:right;
    margin-top: 75px;
}
.starter-template {
    text-align: center;
    background-color: #C4C0BF;
}
.float-right {
    float: right;
    margin-left: 1.5%;
}
img {
    border: 2px solid #FFF;
}
.float-left {
    float: left;
}
.align-right {
    text-align:right;
}
.container-wrap {
}
.nav-wrap {
    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
    background-color:#333333;
}
nav.navbar.navbar-default {
    background-color:#333333;
    border:none;
}
.navbar {
    margin-bottom:0;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color:#efeeee;
}
.navbar-default .navbar-nav>li>a {
    color: #b8b6b6;
}
.bubble-wrap {
    background-image: url(../images/water-drop-banner.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 43px;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #03F;
    margin: 0px;
    padding: 0px;
}
.row {
    margin-top:20px;
}
.center {
    text-align: center;
}
.clear {
    clear:both
}
.example blockquote {
    background:#f9f9f9;
    border-left:10px solid #333;
    margin:1.5em 10px;
    padding:.5em 10px;
    blockquote {
        background:#f9f9f9;
        border-left:10px solid #ccc;
        margin:1.5em 10px;
        padding:.5em 10px;
        quotes:"201C""201D""2018""2019";
    }
}
.example blockquote:before {
    color:#333;
    content:open-quote;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
}
.example blockquote p {
    display:inline;
}
hr {
    width:75%;
}
ul.fa-ul li {
    list-style-type:none;
    line-height:1.2;
    font-size:36px;
}
i.fa-li.fa.fa-check-square-o.fa-2, i.fa-li.fa.fa-check-square-o.fa-4 {
    color:red;
    font-weight:500;
}
.green {
    color: #339933;
}
.address {
}
.greenhouse-attn {
    width:100%;
    padding-top:55px;
    padding-bottom:55px;
}
.greenhouse-list {
    width:80%;
    margin:0 auto;
}
/*	
    #contact {
    	width: 300px;
    	margin-top: 75px;
    	margin-bottom: 50px;
    	height: 200px;
    	margin-left: 45px;
    	float: left;
    }*/
 #contact-form {
    float:left;
    margin-bottom: 40px;
}
.footer {
    position: relative;
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    background-image: none;
    background-repeat: repeat-x;
    margin-top: 0px;
    clear: both;
    height: 350px;
    background-color: #333333;
}
footer.footer .row {
    margin-top:0;
}
#social-icons {
    margin-left: 55px;
    margin-top: 25px;
}
.feature-margin {
    margin-top:35px;
    margin-bottom:45px;
}
i.fa.fa-hand-o-right {
    color:blue;
    font-size:2rem;
    margin-left:8px;
    margin-right:8px;
}
/* Portrait tablets and medium desktops */
 @media (min-width: 992px) and (max-width: 1199px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}
/* Portrait tablets and small desktops */
 @media (min-width: 768px) and (max-width: 991px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}
/* Landscape phones and portrait tablets */
 @media (max-width: 767px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
    .slogan {
        margin-top:0;
        float:none;
        margin-bottom: 25px;
    }
}
/* Landscape phones and smaller */
 @media (max-width: 480px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}
body {
    background-color: #C4C0BF;
    background-image:url(../images/background_light_slice.jpg);
    background-repeat:repeat-x
}
.glow {
    background-image:url(../images/background_light.jpg);
    background-repeat:no-repeat;
}
#logo-box img {
    border:none;
    margin-top: 25px;
}
.slogan {
    float:right;
    margin-top: 75px;
}
.starter-template {
    text-align: center;
    background-color: #C4C0BF;
}
.float-right {
    float: right;
    margin-left: 1.5%;
}
img {
    border: 2px solid #FFF;
}
.float-left {
    float: left;
}
.align-right {
    text-align:right;
}
.container-wrap {
}
.nav-wrap {
    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
    background-color:#333333;
}
nav.navbar.navbar-default {
    background-color:#333333;
    border:none;
}
.navbar {
    margin-bottom:0;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color:#efeeee;
}
.navbar-default .navbar-nav>li>a {
    color: #b8b6b6;
}
.bubble-wrap {
    background-image: url(../images/water-drop-banner.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 43px;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #03F;
    margin: 0px;
    padding: 0px;
}
.row {
    margin-top:20px;
}
.center {
    text-align: center;
}
.clear {
    clear:both
}
.example blockquote {
    background:#f9f9f9;
    border-left:10px solid #333;
    margin:1.5em 10px;
    padding:.5em 10px;
    blockquote {
        background:#f9f9f9;
        border-left:10px solid #ccc;
        margin:1.5em 10px;
        padding:.5em 10px;
        quotes:"201C""201D""2018""2019";
    }
}
.example blockquote:before {
    color:#333;
    content:open-quote;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
}
.example blockquote p {
    display:inline;
}
hr {
    width:75%;
}
ul.fa-ul li {
    list-style-type:none;
    line-height:1.2;
    font-size:36px;
}
i.fa-li.fa.fa-check-square-o.fa-2, i.fa-li.fa.fa-check-square-o.fa-4 {
    color:red;
    font-weight:500;
}
.green {
    color: #339933;
}
.address {
}
.greenhouse-attn {
    width:100%;
    padding-top:55px;
    padding-bottom:55px;
}
.greenhouse-list {
    width:80%;
    margin:0 auto;
}
/*	
    #contact {
    	width: 300px;
    	margin-top: 75px;
    	margin-bottom: 50px;
    	height: 200px;
    	margin-left: 45px;
    	float: left;
    }*/
 #contact-form {
    float:left;
    margin-bottom: 40px;
}
.footer {
    position: relative;
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    background-image: none;
    background-repeat: repeat-x;
    margin-top: 0px;
    clear: both;
    height: 350px;
    background-color: #333333;
}
footer.footer .row {
    margin-top:0;
}
#social-icons {
    margin-left: 55px;
    margin-top: 25px;
}
.feature-margin {
    margin-top:35px;
    margin-bottom:45px;
}
i.fa.fa-hand-o-right {
    color:blue;
    font-size:2rem;
    margin-left:8px;
    margin-right:8px;
}
/* Portrait tablets and medium desktops */
 @media (min-width: 992px) and (max-width: 1199px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}
/* Portrait tablets and small desktops */
 @media (min-width: 768px) and (max-width: 991px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}
/* Landscape phones and portrait tablets */
 @media (max-width: 767px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
    .slogan {
        margin-top:0;
        float:none;
        margin-bottom: 25px;
    }
}
/* Landscape phones and smaller */
 @media (max-width: 480px) {
    .col-md-7 h2.featurette-heading.align-right {
        text-align:initial;
    }
}

#mc_embed_signup{
    font-size:14px;
    color:#b8b6b6;
    margin-top:17px;
}
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container glow img-responsive">
    <div id="logo-box"><a href="index.html"><img src="images/meridian-logo.png" width="363" height="184" class="float-left img-responsive"/></a>
        <div class="slogan">
            <img src="images/commercial-filtration-specialists.png" width="355" height="19" alt="Commercial &amp; Light Industrial Filtration Specialists" class="center-block" />
        </div>
    </div>
</div>
<div class="container"></div>
<div class="nav-wrap">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button> <a class="navbar-brand" href="index.html">Meridian - Home</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="Abouiron-removal-system.html" class="dropdown-toggle" data-toggle="dropdown">About &amp; Examples
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="iron-removal-system.html">Iron Removal System</a></li>
                                <li><a href="completed-system-photos.html">Completed System Photos</a></li>
                            </ul>
                            <!--end of dropdown menu -->
                        </li>
                        <!--end of dropdown list items -->
                        <li><a href="greenhouse-and-nursery.html">Greenhouse &amp; Nursery</a></li>
                        <li><a href="irrigation.html">Irrigation</a></li>
                        <li><a href="features.html">Features</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
</div>
<!--end of container with header and nav -->
<div class="container-wrap">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <article>
                    <header>
                        <h1>Meridian Water Filtration: Irrigation & Residential water solutions</h1>
                    </header>
                    <p>Besides solutions for greenhouse and nursery water problems Meridian Water Filtration has irrigation and filtration available for:</p>
                    <p>These filtration systems will eliminate all of the problems related to iron such as staining. Often condo complexes, housing developments and golf courses experience trouble with staining on items like fencing, sinage or lawn furniture. Anything vinyl or plastic may be susceptible to such unsightly iron stains.</p>
                    <p>Your customers will notice beautiful property not water stains!</p>
                    <p>With Meridian Iron removal solutions we will help you make sure; they will view your property exactly how you intend them too!</p>
                </article>
            </div>
            <!--end of first col -->
            <div class="col-md-6">
                <img src="images/golf-course-filtration.jpg" width="600" height="400" alt="Flowers in a greenhouse" class="img-responsive center-block" />
            </div>
        </div>
    </div>
</div>
<div class="container-wrap">
    <div class="container">
        <div>
            <div class="greenhouse-attn">
                 <h3 class="center">Besides solutions for greenhouse and nursery water problems Meridian Water Filtration has irrigation and filtration available for:</h3>
                <div class="list-wrap">
                    <div class="greenhouse-list">
                        <ul class="fa-ul">
                            <li><i class="fa-li fa fa-check-square-o fa-2" style="color:green"></i>Condominium complexes</li>
                            <li><i class="fa-li fa fa-check-square-o fa-2" style="color:green"></i>Golf Courses</li>
                            <li><i class="fa-li fa fa-check-square-o fa-2" style="color:green"></i>Agriculture</li>
                            <li><i class="fa-li fa fa-check-square-o fa-2" style="color:green"></i>Residential irrigation</li>
                            <li><i class="fa-li fa fa-check-square-o fa-2" style="color:green"></i>Residential sulfur removal</li>
                        </ul>
                    </div>
                </div>
                <p class="lead">
                    <br/>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <!--end of row -->
</div>
<!--end of column container -->
<p></p>
<!--end of main container which contains the colmns and the quotes -->
<div class="bubble-wrap">
    <!--contains bubble ribbon -->
    <div class="container"></div>
</div>
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div id="social-icons">
                    <a href="//plus.google.com/104130344147331418420?prsrc=3" target="_new" style="text-decoration:none;" rel="publisher">
                        <img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div>
                    <div id="mc_embed_signup">
                        <form action="//meridianwaterfiltration.us10.list-manage.com/subscribe/post?u=295abf2c8365b6eb68c704c9e&amp;id=3c6eb9409c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                            <div id="mc_embed_signup_scroll">
                                <label for="mce-EMAIL">Subscribe to our mailing list</label>
                                <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required />
                                <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                                <div style="position: absolute; left: -5000px;">
                                    <input type="text" name="b_295abf2c8365b6eb68c704c9e_3c6eb9409c" tabindex="-1" value="" />
                                </div>
                                <div class="clear">
                                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--End mc_embed_signup-->
                </div>
            </div>
            <div class="col-md-4">.col-md-4</div>
        </div>
    </div>
    <!--End container-->
</footer>

0 个答案:

没有答案
相关问题
最新问题