Flex在IE和Chrome中不起作用
[英]Flex not working in IE and Chrome
問題描述
由於某些原因， 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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>
1 個解決方案
解決方案1
0 2015-07-20 12:44:14
我找到了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;
}
Flex 在 chrome 中工作，但在 IE 中不工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.