Question

我目前正在为一个网站开发一个新的bootstrap标记，它看起来完全像谷歌Chrome一样 - 但是当我切换到IE11时，看起来网格系统被搞砸了。

我已经指定了视口，IE =边缘等，并尝试将answer.js包含在各种谷歌搜索建议中。该网站看起来很好用xs屏幕尺寸，但是对于更大的屏幕尺寸，容器会溢出窗口，因此无法适应屏幕尺寸。

你能救我吗？该网站可在 thyrace.dk/etape以及正下方的标记。

非常感谢。

@-ms-viewport       { width: device-width; }
@viewport           { width: device-width; }

html, body {
    height: 100%;
}
body {
    background-image: url("../img/bg.png");
    background-repeat: repeat;
    font-size: 13px;
}
.wrapper {
    height: 100%;
    display: table;
}
.navbar {
    background-color: white;
}
.content {
    background-color: white;
    height: 100%;
    padding: 20px;
}
main, aside {
    margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav li > a:hover {
    color: #FFF;
    background: grey;
}

aside {
    padding: 0;
    width: 100%;
}
aside img {
    float: left;
    margin: 0 0 5px 5px;
}


/* Carousel */
.carousel {
    margin-bottom: 20px;
    margin: 0 10px 0 10px;
}
.carousel .item {
    height: 225px;
    background-color: #555;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
}
.carousel-caption h4 {
    margin: 0;
    background-color: rgba(175, 0, 0, 0.50);
}

.carousel-indicators {
    top: 10px;
    height: 20px;
}
.carousel-text {
    z-index: 1;
    position: absolute;
    bottom: 20px;
    right: 0;
    padding: 15px;
    width: 400px;
    max-width: 100%;
    background-color: grey;
    color: white;  
}

.carousel-text h2 {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.navbar-default .navbar-nav li {
    margin-bottom: 1px;
}

@media (min-width: 768px) {
    .wrapper {
        padding: 20px 0 20px 0;
    }
    .navbar-collapse {
        height: auto;
        border-top: 0;
        box-shadow: none;
        max-height: none;
        padding-left:0;
        padding-right:0;
    }
    .navbar-collapse.collapse {
        display: block !important;
        width: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in {
        overflow-x: visible;
    }
    .navbar {
	margin-right: 0;
	margin-left: 0;
        border-radius: 0px;
    }	
    .navbar-nav, .navbar-nav > li, .navbar-left, 
    .navbar-right, .navbar-header {
        float: none !important;
    }
    .navbar-right .dropdown-menu {
        left: 0;
        right: auto;
    }
    .navbar-logo {
        padding: 0 10px 10px 10px;
    }
    .page-return {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        font-size: 11px;
    }
}

<!DOCTYPE HTML>
<html lang="da" >
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ThyRace.dk - Løb med naturoplevelser i Thy</title>
        <link rel="stylesheet"  type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css">
    </head>
    <body>
        <div class="container wrapper">
                <div class="col-xs-12 col-sm-3 col-md-2">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <div class="hidden-xs page-return">
                                <a href="http://thyrace.dk">Tilbage til hovedoversigten</a>
                            </div>
                            <img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" />
                            <a class="navbar-brand visible-xs" href="#">
                                Etapeløb Thy Trail
                            </a>
                        </div>
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li class="visible-xs"><a href="http://thyrace.dk">Tilbage til thyrace.dk</a></li>
                                <li class="active"><a href="index.htm">Løbsinformation</a></li>
                                <li><a href="rute.htm">Rute</a></li>
                                <li><a href="#">Tilmelding</a></li>
                                <li><a href="#">Startliste</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-12 col-sm-9 col-md-10">
                    <div class="navbar navbar-default content">
                        <div class="row">
                            <div id="carousel" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="img/slider/1.jpg" alt="" />
                                    </div>
                                    <div class="item">
                                        <img src="img/slider/2.jpg" alt="" />
                                    </div>
                                    <div class="item">
                                        <img src="img/slider/3.jpg" alt="" />
                                    </div>
                                    <div class="item">
                                        <img src="img/slider/4.jpg" alt="" />
                                    </div>

                                </div>

                                <ol class="carousel-indicators">
                                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel" data-slide-to="1"></li>
                                    <li data-target="#carousel" data-slide-to="2"></li>
                                    <li data-target="#carousel" data-slide-to="3"></li>
                                </ol>
                                <div class="carousel-text">
                                    <h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2>
                                    
                                </div>
                                
                            </div> <!-- End carousel -->
                        </div> <!-- End carousel row -->
                        <div class="row">
                            <div class="col-xs-12 col-sm-9">
                                <main> 
                                    Bla bla bla
                                </main>
                            </div>
                            <div class="col-xs-12 col-sm-3">
                                <aside>                                
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
                                    <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
                                </aside>
                            </div> <!-- End aside wrapper -->
                        </div> <!-- End main + aside row -->
                    </div> <!-- End navbar --> 
                </div> <!-- End content col -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

Answer 1

StockItem = (quoteItem.BodyType.Name == "Insulated" ? db.StockItems.Where(x => x.StockCode == "SCH095").First() : (condition ? db.StockItems.Where(x => x.StockCode == "SCH100").First() : (nextcondition ? true : false))); DOM不是bootstrap你使用的那样

<div class="wrapper">
  <div class="container">
    <div class="row>
      <div class="col-xs-12 col-sm-3 col-md-2">

您已display:table使用wrapper导致IE以及FF的布局问题同样为了获得更好的效果，请停止使用自定义class以及bootstrap class，否则会在某些时候出现问题。

例如：

而不是使用：

<div class="col-md-6 yourClass">

你应该使用：

<div class="col-md-6">
  <div class="yourClass">

Twitter-Bootstrap＆amp; IE网格系统问题

1 个答案: