的Flex不是在IE和Chrome

Question

DEMO

工作出於某種原因，flex屬性沒有在IE工作。我不確定問題出在哪裏，請有人看一下。

由於div將被動態添加/刪除，因此我無法設置固定寬度。

#stores-table { 
 
    width: 100%; 
 
    font-family: arial; 
 
    border-spacing: 0; 
 
    background: #8ff; 
 
    display: table; 
 
} 
 
#tr { 
 
    float: left; 
 
    width: 100%; 
 
    padding-bottom: 5px; 
 
    height: auto; 
 
} 
 
#td { 
 
    float: left; 
 
    padding: 5px 5px; 
 
    font-size: 12px; 
 
    line-height: 18px; 
 
    word-break: break-word; 
 
} 
 
#stores-table #thead { 
 
    background: #edece9; 
 
    height: auto; 
 
    float: left; 
 
    width: 100%; 
 
    width: 650px\9; 
 
    min-width: 650px; 
 
    display: flex; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
} 
 
.store_name, 
 
.store_state, 
 
.store_phone, 
 
.store_add, 
 
.store_state, 
 
.store_city, 
 
.store_zip, 
 
.store_direction { 
 
    /* width: 20%; */ 
 
    /* display: inline-block; */ 
 
    flex-grow: 1; 
 
    border: 1px solid #f00; 
 
    -webkit-box-flex: 1; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    -moz-box-flex: 1; 
 
    /* OLD - Firefox 19- */ 
 
    width: 20%; 
 
    /* For old syntax, otherwise collapses. */ 
 
    -webkit-flex: 1; 
 
    /* Chrome */ 
 
    -ms-flex: 1; 
 
    /* IE 10 */ 
 
    flex: 1; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    /* width: 25%\9; */ 
 
    /* display: inline-block\9; */ 
 
    min-width: 10px; 
 
    display: inline-block !important; 
 
    display: inline-block; 
 
    *zoom: 1; 
 
    *display: inline; 
 
}

<div id="stores-table"> 
 
    <div id="thead"> 
 
    <div id="td" class="store_name">Store Name</div> 
 
    <div id="td" class="store_add">Address</div> 
 
    <div id="td" class="store_city">City</div> 
 
    <div id="td" class="store_direction">Directions</div> 
 
    </div> 
 
    <div id="tbody"> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">550 Eglinton Ave W Eglinton</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 550 Eglinton Ave W Eglinton Toronto, Ontario M5N1B6">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">2345 Yonge St The Edison Centre</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 2345 Yonge St The Edison Centre Toronto, Ontario M4P1E4">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">523 St. Clair Ave W St Clair &amp; Bathurst</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 523 St. Clair Ave W St Clair &amp; Bathurst Toronto, Ontario M6C1A1">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">1507 Yonge St Yonge &amp; St.Clair</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 1507 Yonge St Yonge &amp; St.Clair Toronto, Ontario M4T1Z2">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">759 Mount Pleasant Rd Mt. Pleasant Road</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 759 Mount Pleasant Rd Mt. Pleasant Road Toronto, Ontario M4S2N4">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">3110 Bathurst Street Lawrence Plaza</div> 
 
     <div id="td" class="store_city">North York</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 3110 Bathurst Street Lawrence Plaza North York, Ontario M6A2A1">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">1500 Avenue Rd Avenue &amp; Lawrence</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 1500 Avenue Rd Avenue &amp; Lawrence Toronto, Ontario M5M3X2">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">1840 Eglinton Ave W Eglinton &amp; Dufferin</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 1840 Eglinton Ave W Eglinton &amp; Dufferin Toronto, Ontario M6E2J4">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">292 Dupont St Spadina &amp; Dupont</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 292 Dupont St Spadina &amp; Dupont Toronto, Ontario M5R1V9">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Fortinos</div> 
 
     <div id="td" class="store_add">700 Lawrence Ave W</div> 
 
     <div id="td" class="store_city">North York</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Fortinos 700 Lawrence Ave W North York, Ontario M6A3B4">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Loblaws</div> 
 
     <div id="td" class="store_add">650 Dupont St</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Loblaws 650 Dupont St Toronto, Ontario M6G4B1">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Metro</div> 
 
     <div id="td" class="store_add">656 Eglinton Ave E</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Metro 656 Eglinton Ave E Toronto, Ontario M4P1P1">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">1531 Bayview Ave 1531 Bayview</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 1531 Bayview Ave 1531 Bayview Toronto, Ontario M4G3B5">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">3089 Dufferin St Dufferin &amp; Lawrence</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 3089 Dufferin St Dufferin &amp; Lawrence Toronto, Ontario M6A2S7">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">2340 Eglinton Ave W. West Side Mall</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 2340 Eglinton Ave W. West Side Mall Toronto, Ontario M6M1S6">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Shoppers Drug Mart</div> 
 
     <div id="td" class="store_add">565 Sherbourne St Sherbourne &amp; Howard</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Shoppers-Drug-Mart 565 Sherbourne St Sherbourne &amp; Howard Toronto, Ontario M4X1W7">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Metro</div> 
 
     <div id="td" class="store_add">1411 Lawrence Ave W</div> 
 
     <div id="td" class="store_city">North York</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Metro 1411 Lawrence Ave W North York, Ontario M6L1A4">Directions</a> 
 
     </div> 
 
    </div> 
 
    <div id="tr"> 
 
     <div id="td" class="store_name">Walmart</div> 
 
     <div id="td" class="store_add">1305 Lawrence Ave W</div> 
 
     <div id="td" class="store_city">Toronto</div> 
 
     <div id="td" class="store_direction"><a target="_blank" class="small button radius getDir" href="http://maps.google.com/maps?daddr=Walmart 1305 Lawrence Ave W Toronto, Ontario M6L1A5">Directions</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我已經找到了Flex的備用， DEMO

HTML : 

<div class="Table"> 
    <div class="Heading"> 
     <div class="Cell"> 
      <p>Heading 1</p> 
     </div> 
     <div class="Cell"> 
      <p>Heading 2</p> 
     </div> 
     <div class="Cell"> 
      <p>Heading 3</p> 
     </div> 

    </div> 

    <div class="Row"> 
     <div class="Cell"> 
      <p>Row 1 Column 1</p> 
     </div> 
     <div class="Cell"> 
      <p>Row 1 Column 2</p> 
     </div> 
     <div class="Cell"> 
      <p>Row 1 Column 3</p> 
     </div> 
    </div> 
    <div class="Row"> 
     <div class="Cell"> 
      <p>Row 2 Column 1</p> 
     </div> 
     <div class="Cell"> 
      <p>Row 2 Column 2</p> 
     </div> 
     <div class="Cell"> 
      <p>Row 2 Column 3</p> 
     </div> 
    </div> 
</div> 




CSS : 

    .Table { 
     display: table; 
     border : 1px solid #f00; 
     width : 100%; 
    } 
    .Title 
    { 
     display: table-caption; 
     text-align: center; 
     font-weight: bold; 
     font-size: larger; 
    } 
    .Heading 
    { 
     display: table-row; 
     font-weight: bold; 
     text-align: center; 
    } 
    .Row 
    { 
     display: table-row; 
    } 
    .Cell 
    { 
     display: table-cell; 
     border: solid; 
     border-width: thin; 
     padding-left: 5px; 
     padding-right: 5px; 
    }