3

私は次のコードとCSSを持っています。Chromeではうまく機能しますが、IEでは機能しません。IEでも機能させる方法はありますか？

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>

4

1 に答える 1

7

IE7はサポートしていませんdisplay:table。コードはIE8、IE9、IE10で問題なく表示されます。したがって、実際の値を使用する<table>か、オプションの場合はfloat代わりにsを使用する必要があります。

他に方法はありません、私は恐れています。

編集：どうやらこれはあなたのページレイアウトのためです。<table>またはを使用するべきではありませんdisplay:table。DIVの男を浮かせてください！

于 2012-11-14T18:15:44.157 に答える