2014-06-06 52 views
0

類似的問題:Respond.JS Not Working in IE 8Respond.js崩潰IE8,無法正常工作。引導3

只擔心IE8

我已經學會respond.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]--> 

我正在做相關的網址,以避免訪問問題。沒有幫助。我還閱讀了幾個堆棧問題和其他問題。註釋媒體查詢的站點可能會導致其崩潰。爲了提供這個優點,我刪除了CSS中的所有評論,但沒有任何幫助 - 沒有評論過媒體查詢。

我設法阻止崩潰,並獲得respond.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); 
    } 
} 
+0

測試區域:http://192.254.230.207/~xjchcxx/portal/(不能在身上放一個IP鏈接Q) –

回答

1

不能給一個解釋爲什麼,但溢出:滾動是問題。

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