I have the following code and CSS. It works good in Chrome, but not in IE. Is there any way to make it work in IE too?
CSS:
<style type="text/css">
.table {width:100%;height: 1%;background-color: lime;display: table;border-collapse: collapse;}
.row {display: table-row;}
.centercell {vertical-align: top;display: table-cell;background-color: #0f0;}
.top{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
.bottom{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
.middle{background-color:pink;width:100%;height: 100%;margin: -20px 0px;position: relative;padding: 20px 0px;}
.rightcell {vertical-align: top;background-color: #f00;display: table-cell;width:155px;background-image: url('img/bg1.gif');background-repeat:repeat-y}
.leftcell {vertical-align: top;background-color: #f00;display: table-cell;width:171px;}
</style>
HTML:
<div class="table">
<div class="row">
<div class="leftcell">
right column
</div>
<div class="centercell">
<div class="top">center top</div>
<div class="middle">center middle</div>
<div class="bottom">center bottom</div>
</div>
<div class="rightcell">
right column<br>
right column<br>
right column<br>
right column<br>
right column<br>
right column<br>
right column<br>
right column<br>
</div>
</div>
IE7 doesn't support display:table
, your code looks fine in IE8, IE9 and IE10. So either you must use an actual <table>
or, if it's an option, use float
s instead.
No other way, I'm afraid.
Edit: Apparently this is for your page layout . You shouldn't be using <table>
or display:table
. Just float some DIVs man!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.