Respond.js崩溃IE8而无法正常工作。 Bootstrap 3

时间:2014-06-06 21:08:55

标签: twitter-bootstrap twitter-bootstrap-3 respond.js

类似问题:Respond.JS Not Working in IE 8

只担心IE8

我已经学会了response.js无法在本地工作,这是第一个问题。现在,我正在服务器上运行。而不是像Bootstrap 3那样鼓励和链接:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

我正在做相对网址以避免访问问题。没有帮助。我还阅读了几个堆栈问题和其他评论媒体查询的Q&amp; A网站可能导致它崩溃。为了实现这一优点,我删除了CSS中的所有注释,但这没有任何帮助 - 没有注释掉媒体查询。

如果我取消了我的引导主题,我已设法阻止崩溃并让response.js工作。

我删除的项目,已清除缓存并已测试:

  • 删除所有评论
  • 删除背景图片
  • 删除渐变
  • 删除webkit过渡
  • 删除所有媒体查询

我不知道接下来会删除什么,除了删除整个CSS并一次添加一行...

这是我的CSS

/*****

Basic Styles

******/

img{
    max-width: 100%;
}
.mobile-hide{
    display: none;
}

body {
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 0px;
}

.bordered-box{
    border: 2px solid #888;
    padding: 8px ;
    /* overflow: hidden; */


}
.border-left{
    border-left:2px solid #888;
}
.no-side-margin{
    margin-left: 0px;
    margin-right:0px;
}
.rounded-corners{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.rounded-corners-bottom{
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.rounded-corners-top{
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.col-sm-0{
    width:  0px;
    float: left;
    overflow: hidden;
    margin:0px;
    padding: 0px;
    min-height: 1px;
}

.padding-left{
    padding-left: 6px;
}
.padding-top{
    padding-top: 6px;
}

.padding-bottom{
    padding-bottom: 20px;
}
.margin-top{
    margin-top: 8px;
}

.margin-bottom{
    margin-bottom: 20px;
}

img.padded-img{
    padding: 10px;
}

.big-padding{
    padding: 20px 0px;
}
.no-margin-bottom{
    margin-bottom: 0px;
}
.no-margin-top{
    margin-top: 0px;
}
h4.no-margin-bottom{
    padding: 4px;
    width: 100%;
}
.no-padding{
    padding: 0px;
}
.no-border{
    border: 0px;
}
.added-padding{
    padding: 8px;
}
.smaller-font{
    font-size: 10px;
}
.row input,
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: 75%;
    margin-bottom: 5px;
}

.full-inputs input , .full-inputs select{
    width: 100%;
}

.row select{
    width: 75%;
}
.row input[type=radio], .row input[type=checkbox]{
    width: inherit;
}
.row input[type=radio], .row input[type=checkbox]{
    max-width: 12px;
}
.rotate-clockwise{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}
.fullwidth{
    width: 100% !important;
}
.short-width{
    width: 55px !important;
}
.no-hover:hover{
    text-decoration: none;
}
.no-margin{
    margin: 0px;
}

.no-bg{
    background: inherit;
}
/*****

Colors

******/

.x-light-grey{
    background: #f1f1f1;
    color: #000;
}
.light-grey{
    background: #ececec;
    color: #888;
}
    .light-grey-text{
        color: #ececec;
    }
        hr.light-grey-text{
            border-color:#dfdfdf;
        }
.medium-grey{
    background: #c6c4c4;
    color: #000;
}
    .medium-grey-text{
        color:#c6c4c4;
    }
    .medium-grey-text a{
        color:#c6c4c4;
        text-decoration: underline;
    }
input.medium-grey{
    background: #c6c4c4;
}

.medium-dark-grey{
    background: #6f6e6e;    
}

    .medium-dark-grey a{
        color: #fff;
    }
    .medium-dark-grey a:hover{
        color: #000;
        text-decoration: none;
    }   
    .medium-dark-grey:hover {
        background: #c6c4c4;
    }

.dark-grey{
    background: #173746;
    color: #fff;
}
    .dark-grey-text{
        color: #fff;
    }

.black-text{
    color: #000;
}
.white{
    background: #fff;
    color: #888;
}
    .white-text{
        color: #fff;
    }

.yellow-text{
    color: #e97e00;
}
.light-blue{
    background: #4bb0e4;
    color: #fff;
}
    .light-blue-text{
        color:#4bb0e4;
    }

.medium-blue-text{
    color: #428BCA;
}
.blue{
    background: #232a58;
    color: #fff;
}
    .blue-text{
        color: #232a58;
    }
    hr.blue{
        border-color: #232a58;
    }
.red-text{
    color: red;
}

.medium-green{
    background: #176c19;
}
    .medium-green-text{
        color: #176c19;
    }
    .medium-green a:hover{
        color: #000;
        text-decoration: none;
    }   
    .medium-green:hover {
        background: #c6c4c4;
    }

.medium-green a, .medium-green{
    color: #fff;
}

.grey-gradient{
    background: #ededed;
    background: -moz-linear-gradient(top,  #ededed 0%, #f2f2f2 30%, #f8f8f8 46%, #f8f8f8 49%, #f6f6f6 49%, #f6f6f6 50%, #ffffff 78%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(30%,#f2f2f2), color-stop(46%,#f8f8f8), color-stop(49%,#f8f8f8), color-stop(49%,#f6f6f6), color-stop(50%,#f6f6f6), color-stop(78%,#ffffff), color-stop(100%,#ffffff)); 
    background: -webkit-linear-gradient(top,  #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%);
    background: -o-linear-gradient(top,  #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%); 
    background: linear-gradient(to bottom,  #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
}

/*****

Header

******/


.padded{
    padding-top: 15px;
}

/*****

Arrows

******/
.arrow_box {
    position: relative;
    padding:5px 15px;
    height: 30px;
}

.arrow_box_blue{
    background: #112346;
    color: #fff;
    z-index: 100;
}
.arrow_box_blue:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(17, 35, 70, 0);
    border-left-color: #112346;
    border-width: 13px;
    margin-top: -12px;
}
.arrow_box_blue:before {
    left: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255,255,255,0);
    border-left-color: #ececec;
    border-width: 13px;
    margin-top: -12px;
}
.arrow_box_grey{
    background: #ececec;
    color: #888;
    font-size: 10px;
    line-height: 20px;

}
.arrow_box_grey:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(17, 35, 70, 0);
    border-left-color: #ececec;
    border-width: 13px;
    margin-top: -12px;
}
.arrow_box_grey:before {
    left: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255,255,255,0);
    border-left-color: #ececec;
    border-width: 13px;
    margin-top: -12px;
}

.arrow_box:first-child:before{
    border: none;
}


/*****

Sidebar

******/

#sidebar h2{
    font-size: 18px;
    padding: 4px;
    margin-bottom:0px;
    margin-top:32px;
}
#sidebar ul{
    margin-left:0px;
    padding:0px;
}

#sidebar li{
    list-style-type: none;
    padding: 20px 10px;
    font-size:12px;
}
#sidebar a{
    color: #000;
}

#sidebar .active a{
    color: #fff;
}
#sidebar .active:after{
}

#sidebar{
    overflow: hidden;
}
.sidebar-nav a:hover{
    text-decoration: none;
}
.sidebar-nav a:hover li{
    background: #4bb0e4;
    color: #fff;
}
.sidebar-nav a:hover li.light-blue{
    background: #c6c4c4;
    color: #fff;
}

.toggle-btn{
    margin-top: 5px;
}

.toggle-btn .glyphicon{
    padding-right:6px;
    padding-left:6px;
}
.toggle-btn a:hover{
    text-decoration: none;
}

a#toggler-hide{
    color: #fff;
}
a#toggler-show,a#summary-show,a#summary-hide, .btn-padding{
    padding: 4px;
}

a#summary-show .glyphicon{
    padding-right:3px;
}

.filter-section{
    margin-bottom: 20px;
    border-bottom: 4px solid #888;
}

#filters input{
    width: inherit;
}

/*****

Home Page Dashboard

******/

.bordered-box h4.dark-grey{

}



/*****

Summary Floater

******/

.row{
    position: relative;
}

#summary-info{
    position: absolute;
    right: 0;
    z-index: 101;
    background: rgba(255,255,255,0.89);
}

.summary-box{
    padding: 0px;
    margin: 10px 0px;
}
.summary-box h5{
    margin-top: 0px;
    padding:5px 0px 2px 4px; 
}

.summary-box h6{
    font-size: 14px;
    padding: 4px 6px 10px;
}

.summary-box p{
    font-size: 12px;
    padding: 1px 8px;
    margin: 0px;
}

.summary-box hr{
    margin: 2px 10px;
    border-color: #888;
}
p.text-indent{
    padding:1px 14px;
}

#asset-btn{
    max-width: 200px;
    padding: 5px 0px 5px 5px;
}

.summary-box .light-grey{
    padding-bottom: 15px;
}

.summary-box .row{
    padding: 0px 6px;
    font-size: 12px;
}

/*****

Company/Account Information

******/

#company-header h3, .section-title{
    margin-top: 0px;

}

#company-header input{
    width: 90%;
}

/* Tabs */

.request-buyout{
    margin: 5px 0px;
}

#tab-area{
    max-height: 350px;
    overflow: scroll;
    margin-top:30px;
    margin-bottom: 30px;
    border-bottom:3px solid #888;
}

#tab-area .nav-tabs>li{
    background: #ccc;
    border-radius: 4px 4px 0 0;
}
#tab-area .nav-tabs>li a{
    color: #000;
}

.table th{
}
.table th a{
    color: #fff;
}
/* FAQS */

#faqs h5{
    font-weight: 600;
    padding: 6px;
    margin-top:0px;
}
#faqs .panel-title{
    font-size: 14px;
}

#faqs .panel-default>.panel-heading+.panel-collapse .panel-body{
    font-size: 12px;
}

.faqs-list{
    list-style-type: none;
    padding-left:0px;
    text-indent: 20px;
}
.faqs-list li{
    padding: 6px 0px;
}
.faqs-list li:hover{
    background-color: #173746;
    color: #fff;
}

/* Change Address Pages */
.table-responsive{
    max-height: 300px;
    overflow: scroll;
}

/*Contract && Asset Profile */

.download-img{
    max-width: 55px;
}

.back-button .glyphicon{
    top:2px;
}
.back-button h3{
    margin: 0px;
    padding: 10px 0px;
    font-size: 20px;
}

/* Tool Tips */

.tool-tip{
    /* font-size: 20px; */
}

/*****

Payments

******/


/*****

FAQs 

******/
.canon-faqs .panel-default{
    border: none;
}
.canon-faqs .panel-default>.panel-heading{
    background-color: #fff;
}

.canon-faqs .panel{
    -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    border-bottom:1px solid #000;
}

.canon-faqs .glyphicon{
    color: #232A58;
    padding: 4px;
    margin-right:8px;
    background: #e0e0e8;
}
h3.canon-faqs{
    padding-bottom: 4px;
    border-bottom: 1px solid #000;
}






/*****

Footer

******/

footer{
    padding-bottom: 70px;
    font-size:12px;
}

footer, footer a, footer a:visited{
    color: #fff;
}

footer a:hover, footer a:active{
    color: #ccc;
}   

footer h4{
    border-bottom: 1px solid rgba(204,204,204,0.52);
}
footer ul{
    margin-left:0px;
    padding-left:0px;
}
footer li{
    list-style-type: none;
}

.corporate-menu{
    margin-top:26px;
}

/*****

Navigation 

******/

/* Logo area */
.navbar-default{
    background: #fff;
}
.navbar-default .navbar-brand{
    padding-top: 20px;
}
a#logo-banner span {
    background-image: url(../assets/branding/head.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    padding: 10px 122px 0px;

}
.navbar-default .navbar-nav>li>a , footer a, div, .toggle-btn a, .nav-tabs>li{
    -webkit-transition: all 500ms ease-in-out 0s;
    -moz-transition:    all 500ms ease-in-out 0s;
    -o-transition:      all 500ms ease-in-out 0s;
    transition:         all 500ms ease-in-out 0s;
}
span, .fast-animation{
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition:    all 100ms ease-in-out;
    -o-transition:      all 100ms ease-in-out;
    transition:         all 100ms ease-in-out;
}

.no-animation{
    -webkit-transition: all 0ms ease-in-out;
    -moz-transition:    all 0ms ease-in-out;
    -o-transition:      all 0ms ease-in-out;
    transition:         all 0ms ease-in-out;
}

.alpha-out{
    opacity: 0;
}


.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
    color: #d10801;
}

.navbar-default .navbar-nav>li>a{
    border-bottom: 4px solid #fff;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
    border-color:#d10801
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{
    background: #d10801;
}

/* Desktop Menu */
.navbar{
    border-color: #173746;
    border-width: 0px 0px 3px;

}
#logo-banner{
    max-width: 100px;
}

.navbar-nav>li>a:after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 20%;
    height: 50%;
    border-right: 1px solid #ececec;
}
.navbar-nav li:last-child a:after{
    display: none;
}

/* Active Link */
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
    background-color: inherit;
    border-bottom: 4px solid #d10801;
    color: #d10801;
}


/* Mobile Menu */
.navbar-collapse .pull-right{
    width: 100%;
    margin: 0;
}

/*****

Media Queries

******/

@media (min-width: 768px){
    .navbar{
        border: none;
        max-width: inherit;
    }
    .navbar-nav>li>a{
        padding: 8px;
        padding-top:35px;
        padding-bottom:35px;

    }
    .mobile-hide{
        display: block;
    }

    .navbar-collapse .pull-right{
        width: inherit;
    }

    a#logo-banner span {
        background-image: url(../assets/branding/CanonFinancialServices_HEX_CC0000_LG.gif);
        background-size: 100px;
        padding: 15px 55px 0px;
    }   
    .navbar>.container .navbar-brand{
        margin-top:25px;
    }
    .corporate-menu{
        border-top:1px solid rgba(204,204,204,0.52);
    }
    #logo-banner{
        max-width: inherit;
    }

}


@media (min-width: 992px){
    .navbar-default .navbar-nav>li>a{
        font-size:16px;
    }
    a#logo-banner span {
        background-size: 140px;
    }

    footer h4{
        font-size: 15px;
    }

}

@media (min-width: 1200px){
    .corporate-menu{
        border-top:none;
        border-left:1px solid rgba(204,204,204,0.52);
    }
}

1 个答案:

答案 0 :(得分:1)

无法解释原因,但溢出:滚动是问题。

.table-responsive{
    max-height: 300px;
    overflow: scroll;
}