javascript - Flexbox 在 chrome 中工作正常但在 IE 11 中不工作

标签 javascript css twitter-bootstrap angular flexbox

<分区>

我的网站在 chrome 上运行良好，但在 IE 11 中运行不佳。它显示警告。需要跨源资源共享 (CORS)。所有对齐都被破坏了。看起来不太好。

chrom 屏幕排序

IE 11 屏幕排序

我该如何解决这个问题。我在 IE 11 上需要跨源资源共享 (CORS)。我该如何解决这个问题。我正在使用 Angular2 请帮助我，这是我的代码。

细节.html

 <div class="content-area">
<div class="container-fluid flex-row scrollPage">
      <div class="details">
          <div class="brand-prop">
          <div class="title">Input</div>
          <div class="brand-detail">
            <!-- Audit First row start-->
            <div class="detail-sec" >
              <h3 class="m-heading bg-color">Input files</h3>
              <!--<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">-->
              <!--<a [routerLink]="['/dashboard', 'drilldown', activeClient]" (click)="onDrillDown(tabs = ['Expected', 'Received'])">-->
              <a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">
              <!--<a (click)="onDrillDown('Expected')">-->
              <div class="flex-row">
                  <div class="flex-col-left">
                    <div class="number-cont">
                        <h4>Expected</h4>
                        <span class="label">{{summaryDetail?.input?.inputFile?.expected}}</span>
                        <span class="dollar"></span>
                    </div>    
                    <div class="chart-cont">
                        <div class="chart lineChart"></div>
                    </div>                
                  </div>
                  <div class="v-spacer"></div> 
                  <div class="flex-col-right">
                    <div class="number-cont">
                        <h4>Received</h4>
                        <span class="label">{{summaryDetail?.input?.inputFile?.received}}</span>
                        <span class="dollar"></span>
                    </div>   
                    <div class="chart-cont">
                        <div class="chart barChart"></div>
                    </div>
                  </div>                                    
              </div>
              </a>

            </div>
            <!--Audit First row end -->

            <!---My Non Parcel -->

            <div class="detail-sec">
              <h3 class="m-heading">New billings</h3>
              <a [routerLink]="['/dashboard', 'drilldown', activeClient,'Parcel','Non Parcel']" (click)="drillDowns('Expected')">
              <div class="flex-row">
                  <div class="flex-col-left">
                    <div class="number-cont">
                        <h4>Parcel</h4>
                        <span class="label">{{summaryDetail?.input?.newBilling?.parcel}}</span>
                        <span class="dollar"></span>
                    </div>    
                    <div class="chart-cont">
                        <div id="parcelSparkId" class="chart lineChart"></div>
                    </div>                
                  </div>
                  <div class="v-spacer"></div> 
                  <div class="flex-col-right">
                    <div class="number-cont">
                        <h4>Non Parcel</h4>
                        <span class="label">{{summaryDetail?.input?.newBilling?.nonParcel}}</span>
                        <span class="dollar"></span>
                    </div>   
                    <div class="chart-cont">
                        <div id="nonParcelSparkId" class="chart barChart"></div>
                    </div>
                  </div>                                    
              </div>
              </a>
              <div class="flex-row input-align">
                  <div class="flex-col-left">
                    <div class="number-cont">
                        <h4>Electronic</h4>
                        <span class="label">{{summaryDetail?.input?.newBilling?.electronic}}</span>
                        <span class="dollar"></span>
                    </div>    
                    <div class="chart-cont">
                        <div id="chartElectronic" class="chart lineChart"></div>
                    </div>                
                  </div>
                  <div class="v-spacer"></div> 
                  <div class="flex-col-right">
                    <div class="number-cont">
                        <h4>Manual</h4>
                        <span class="label">{{summaryDetail?.input?.newBilling?.manual}}</span>
                        <span class="dollar"></span>
                    </div>   
                    <div class="chart-cont">
                        <div id="chartManual" class="chart barChart"></div>
                    </div>
                  </div>                                    
              </div>
            </div>

            <div class="extra-space"></div>
            <div class="detail-sec">
              <div class="errors-wpr">
                <div class="err-title">
                  <h4>ERRORS</h4>
                  <a (click)="navigateTo(0)">View All</a>
                </div>
                <div class="err-content">
                  <ul>
                    <li class="error" *ngFor="let input of inputData | limitFirstN:limit; let i = index" [routerLink]="['/dashboard', 'errors', activeClient]" (click)="navigateTo(i,activeClient)">
                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                        <span class="ellipsis">   
                          {{input?.taskName }}
                        </span>
                    </li>
                    <!--<li (click)="navigateTo(0)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </li>
                    <li (click)="navigateTo(1)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>
                    <li (click)="navigateTo(2)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>-->
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div><!--- /In Progress --->
      </div>
</div>

细节.css

.main-container{
    padding: 0px;
}

.top-items-list{
    padding-left: 20px;
    float: left;
    max-width: calc(100% - 20px);
    margin-bottom: 30px;
}
.top-items-list > .logo
{
    padding-top: 10px;
    float: left;
    width: 10%;
}
.top-items-list .data-list {
    float: left;

}
.top-items-list .data-list .item {
    float: left;
    border-right: thin solid #DDDDDD;
    position: relative;
    min-width: 160px;
}
.top-items-list .data-list .item:last-child {
    border-right: none;
}

.top-items-list .data-list .item .input {
    font-size: 24px;
}
.top-items-list .data-list .item .input span {
    font-size: 15px;
    color: #878787;
}
.top-items-list .data-list .item .count {
    background-color: #ee242c;
    border-radius: 18px;
    color: #fff !important;
    float: right;
    font-size: 11px !important;
    height: 22px;
    line-height: 22px;
    text-align: center;
    width: 22px;
    display: block;
    padding-bottom: 5px;
    position: absolute;
    right: 10px;
}

.content-area{ padding-top:20px;}
.content-area-full .container{ width:100%;}
.content{background-color:#fff; border-radius:3px; display:table; width:100%;}
.content-part, .more-popup{ display:table-cell; vertical-align:top;}

.details {
    display: flex;
}
.brand-prop {
    color:#000;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}
.brand-prop .title{ font-size:24px; margin-bottom:20px; font-weight:300; }
.brand-prop .subheading{ 
    font-size:13px;  
    font-weight:600; 
}
.brand-prop .brand-detail { 
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
    border-radius: 3px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.detail-sec strong{ 
    color:#888888;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
}

.brand-prop .detail-sec{ padding:20px; border-bottom:1px solid #DDD; line-height:22px;}
.brand-prop .detail-sec:first-child{ padding-top:20px;}
.brand-prop .detail-sec .row{ margin-bottom:20px;}
.brand-prop .detail-sec .row:last-child{ margin-bottom: 0;}

.brand-prop .detail-sec { 
    color:#333; 
    padding-top:10px;
    font-weight: 400;

    &:first-child {
        padding-top: 20px;
    }
    &.no-border {
        border-bottom: none;
    }

    > span {
        color:#333; 
        display:block;
    }
    .dollar {
        font-size: 20px;
        color: #999;
        vertical-align: baseline;
    }
    span.label {
        font-size: 25px;
        display: inline-block;
        font-weight: 400;
        color:#333; 
        padding-left: 2px;
        padding: 0;
    }
}

.brand-prop .detail-sec span.viewall {
    font-size: 13px;     
    float: right;
    margin-top: -12px;
    > a {
        color: #87C328;
    }
}
// .brand-prop .detail-sec li { 
//     background:url(../image2/error-list.png) left 5px no-repeat; 
//     background-size: 18px;
//     padding-left:30px; 
//     padding-bottom:10px;
//     font-size: 13px;
//     font-family: "Open Sans", sans-serif;
// }

.extra-space {
    flex: 1;
}
.extra-space + .detail-sec {
    border-top: 1px solid #ddd;
}
.errors-wpr {

    .err-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        h4 {
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
        }
        > a {
            color: #87C328;
            font-weight: 600;
            align-self: center;
            font-size: 12px;
            &:hover {
                cursor: pointer;
            }
        }
    }
}

.detail-sec.bg-color {
    padding: 10px 20px !important;
    background-color: #F9F9F9; font-weight:600;
}
.detail-sec.bg-color .row {
    margin-bottom: 0;
}

.item.active-tab {
    background-color:#eeeeee;
    padding-bottom: 20px;
    height: 63px;
    position: absolute;
    z-index: 100;
}

.data-list {
    // max-width: 97%;

    ul {
        display: flex;
        overflow-x: hidden;
        flex-direction: row;
        li {
            flex: 1 1 100px;
        }
    }
}
.item {
    background-color: #eeeeee;
    display: table;
    cursor: pointer;
    height: 70px;

    > div {
        display: table-cell;
    }

    >.itm-wpr {
        padding: 10px 20px;
        background-color: #fff;
        transition: display 0.9s;
        img {
            max-height: 16px;
        }
    }
    >.logo {
        display: none;
    }
    &.active {
        box-shadow: none;
        background-color: #eeeeee;
        display: block;

        >.itm-wpr {
            display: none;           
        }
        >.logo {
            text-align: center;
            padding: 10px 0;            
            display: block;
            height: 100%;
            img {
                max-width: 150px;
            }
        }
    }
}


/*.hover-this:hover + .graph-show-image{ display:block;}*/
.graph-show-image {
    display: none;
    position: absolute;
    z-index: 99999; cursor:pointer;
    width:100%; left:0;
}
.graph-show-image img{ width:100%;}
.screen2, .screen3{ display:none;}

.select-action, .select-action label{ float:left;}
.select-action label{ line-height:35px; margin-right:10px; font-weight:400;}
.select-action .select-style, .select-action .select-style select{ float:left; height:35px; line-height:35px; margin-bottom:0;}
.select-action .select-style select{ padding-right:20px;}
.section-details .actions{ background-color:#fff; padding:20px;}

/* reports popup */
.steps {
    display: table;
    width: 100%; margin:30px 0; font-weight:500;
}
.step {
    display: inline-block;
    text-align: center;
    width: 50%; position:relative; z-index:1; float:left;
}

.step span:after {
  content: "";
  position: absolute; left:0;
  height: 1px;
  border-bottom: 1px solid #ccc;
  top: 27%;
  width: 100%; z-index:-1;
}
.step > span {
    background-color: #ccc;
    border-radius: 50%;
    display: table;
    font-weight: 400;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    width: 30px;
}
.step > span.active{ background-color:#8FC058;}
.grid-table th{ padding:0;}
.grid-table th .btn{ border:0 none; min-width:0;}
.grid-table th .btn:hover{ border:0 none;}
.grid-table th .dropdown-popup{ min-width:170px;}
.grid-table th .list-items li:hover ul { display:block;}
.grid-table th .list-items ul {
    background-color: #fff;
    border: 1px solid #ccc;
    left: 100%;
    min-width: 150px;
    position: absolute;
    margin-top:-40px;
    display:none;
}
.grid-table th.last .dropdown-popup{ margin-left:-14px;}
.grid-table th.last .list-items ul{ right:100%; left:inherit;}
#example th {
    padding: 5px 10px;
}


.add-list-items .table-cell {
    border: 1px solid #cccccc;
    padding: 0 !important;
    vertical-align: top;
    width: 45% !important;
}
.add-list-items .table-cell:nth-child(2) {
    border: 0 none;
    width: 10% !important;
}
.add-list-items h4 {
    background-color: #dfe2e7;
    color: #00447f;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px; text-transform:uppercase;
}
.search-list {
    position: relative;
}
.add-list-container{ height:210px; margin-bottom:0 !important;}
.list-options {
    height: 145px;
    overflow-y: scroll;
}
.add-list-items .table-cell:last-child .list-options {
    height: 180px;
}
.add-remove-items{vertical-align:middle !important; text-align:center;}
.add-remove-items img{ cursor:pointer;}
.search-list > input[type="text"] {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color -moz-use-text-color #cccccc;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
}
.search-list > input[type="submit"] {
    background: url(../images/search-icon.png) no-repeat 0 0;
    border: 0 none;
    height: 20px;
    position: absolute;
    right: 20px;
    text-indent: -5000px;
    top: 6px;
    width: 20px;
}
.list-options li {
    padding: 5px 10px; cursor:pointer;
}
.list-options li:hover, .list-options li.selected  {
    background-color:#EBF1F1;
}

.pager li:first-child > a, .pager li:first-child > span {
    border-left: 1px solid #ddd;
}
.pager li > a:hover, .pager li > a:focus{ background-color:#fff;}
.pager li > a, .pager li > span{ border-radius:0;}
.pager{ text-align:right;}


.container-fluid{ max-width:98%;}

.detail-sec.bg-color {
    padding: 10px 20px !important;
    background-color: #F9F9F9;
}
.detail-sec.bg-color .row {
    margin-bottom: 0;
}
.row-eq-height {
  display: flex;
  padding: 0 10px;
  margin-bottom: 30px;
}

.detail-sec {
    .m-heading {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 20px;
        line-height: 22px;
        text-transform: uppercase;
    }
}
.flex-row {
    display: flex;
    justify-content: space-between;

    .subheading {
        margin-bottom: 20px;
    }
    h4 {
        color: #888888;
        font-weight: 400;
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
        margin-bottom: 10px;
    }
    span {
        font-size: 25px;
        font-weight: 400;
        color: #333;
    }
    .flex-col {
        flex: 1 1 100px;
    }
}

.flex-col-left,
.flex-col-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-basis: 40%;

    > .flex-col {
        flex: 1 1 50%;

        .dollar {
            height: 18px;
            line-height: 18px;
            font-weight: 400;
            font-size: 12.6px;
            display: inline-block;
        }
        &:first-child {
            padding-right: 10px;
        }
    }
}

div.detail-sec .flex-row .lblSec {
   // background-color:green;
    padding-left:50px;
   // width:60px;
}
.content-area {
    margin-bottom: 50px;
}
.v-spacer {
    width: 15px;
}
.flex-col-left, .flex-col-right {
    display: flex;
    flex-direction: column;
    flex: 1 1;

    .number-cont {
        margin-bottom: 5px;
    }

    .chart-cont {
       // text-align: center;

        .chart {
           padding: 20px 0px 0; 
        }
    }
}
.chart-cont {
    .chart {
        // background-color: #dde6e9;
    }
}

.item.active {

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;

        .lbl {
            font-size: 18px;
        }
    }
}

///////////////////////////////////////////////////////////////////////////
// =========================== Task menu navigation ==================== //
///////////////////////////////////////////////////////////////////////////


$tasknav__height: 70px;
.task-nav-wpr {
  width: 100%;
  height: $tasknav__height;
  // border: 1px solid red;
  position: relative;
  overflow: hidden;

  &__pre, &__next {
    width: 30px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: $tasknav__height;
    opacity: 1;
    z-index: 100;
    transition: all .3s ease;

    &:hover {
        border: 1px solid #ddd;
        background-color: darken(#fff, 10%);
        opacity: 1;
    }
  }

  &__pre {
    top: 0;
    left: 0;
  }
  &__next {
    top: 0;
    right: 0;
  }
}

.task-nav {
  box-sizing: border-box;
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  display: block;
  padding: 0;
  transition: all .3s ease-in-out;

  &__item {
    box-sizing: border-box;
    width: 160px;
    margin: 0;
    height: 68px;
    display: inline-block;
    position: relative;
    cursor: pointer;
  }  
}


////////////////////////////////////////////////////////////
// ===================== card =========================== //
////////////////////////////////////////////////////////////
.front {
  display: flex;
  flex-direction: column;

  > * {
    flex: 1;
  }
}
.front-r1 {
  position: relative;
  display: block;

  &__cc {
    font-size: 18px;
    padding: 5px 0  5px 15px;
  }
  &__ec {
    position: absolute;
    top: 5px;
    right: 15px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 12px;
    background-color: red;
    color: #fff;
  }

}

.front-r2 {
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;

  &__cc {
    font-size: 20px;
  }
  &__ic {
    color: lighten(#000, 10%);
  }
}

.back {
  display: none;
  justify-content: center;
  align-items: center;

  &__cc {
    font-size: 25px;
  }
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .3s ease-in-out;
  // box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}

.card.flipped {
  border-bottom: none;
  box-shadow: none;

  .front {
    display: none;
  }
  .back {
    display: flex;
  }

}

.card figure {
  // display: block;
  height: 100%;
  width: 100%;
  color: white;
  position: absolute;
  margin: 0;
  // backface-visibility: hidden;
}

.card .front {
  color: black;
}

.card .back {
  background: #eee;
  color: lighten(#000, 10%);
  // transform: rotateY( 180deg );
}
//  $lines-to-show:2;
// .errors-wpr {
//     text-overflow:ellipsis;
//     overflow: auto;
//     display: block;
// }


$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 2;

.errors-wpr {
   display: block; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height:230px;
  position:relative;
  min-width:100%;
  //width: 370px;
   width:27em;
    .ellipsis{
        display: inline-block;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; 
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        vertical-align: bottom;
        //width:33%;
        width:27em;
        }
}

.jqstooltip{ 
    box-sizing: content-box;
   // z-index:1;
    // width:70px;
    // height:25px!important;
}

  .content-area {
    position:relative;
    top:130px;
    padding-top:50px;

}

.fixed1 {
        //padding-top: 20px;
        display: flex;
        top: 75px;
        background-color: #eee;
        width: 100%;
        position:fixed;
}
//  .scrollPage {
//     max-height:calc(100vh - 111px);
//     overflow-y: auto;
//  }


.flex-col-right {
    padding-left:14%;
}

.error {
    i.fa-exclamation-triangle {
        color: #f0ad4e;
    }
}

.detail-sec .input-align {
    margin-top:60px;
}

// .firsttab{
//     margin-left:20px;
// }

最佳答案

IE 不支持 Flex。使用此站点进行检查。

http://caniuse.com/#feat=flexbox

关于javascript - Flexbox 在 chrome 中工作正常但在 IE 11 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39929523/

上一篇：css - 变换 : translateX(-200%) created horizontal scrollbar

下一篇：css - 无法更改聚合物纸按钮的背景颜色

相关文章：

javascript - 如何在页面加载时增加浏览器缩放级别？

css - 使用 div 显示类似表格的数据

html - 在 iOS safari 中输入焦点后模态(固定元素)不可滚动

javascript - 如何在1秒内只更换一次背景图片

javascript - 是否可以在 JavaScript 中读取图像的像素？

javascript - 尝试链接过滤器选项选择

javascript - 更新了有关获取某一字段值的旧问题的答案

javascript - 从不同域以编程方式编辑 iframe 元素

html - Bootstrap - 页面划分

css - React 应用程序无法正确呈现