CSS div容器显示：带有浮动div的表

我有以下CSS DIV表格网格，它需要在多个DIV上有一个DIV跨度

我遇到的问题似乎与浏览器之间的z索引有关。这段代码在Firefox中看起来是正确的，但在IE或Chrome中不起作用，我已经测试过了。我想知道如何通过CSS正确地浮动我的DIV。请查看设置为display:table并允许溢出滚动的DIV周围的class“.blockdata”

要了解两者的区别，请先登录Firefox，然后登录Chrome或IE

您可以在以下位置查看我的示例：

这是我的CSS

/*column holder is not related to the grid - its used for the demo to force .table-inner to scroll */

.column-holder {
width:600px;    
}
.blockdata {
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #999999;
border-radius: 5px;
bottom: 5px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.8) inset;
color: #666666;
font-size: 12px;
left: 0;
overflow: hidden;
padding: 4px;
position:relative;
width:200px;
z-index:999;
}
.container {
display: table;
width:100%;
table-layout:fixed;
position:relative;
z-index:1;
}
.row {
display: table-row;
position:relative;
} 
.column {
display: table-cell;
border-color: #DDDDDD;
border-style: solid;
border-width: 0px 0px 1px 1px ;
padding:5px;
width:120px;  
}

下面是使用DIVs的HTML表

<div class="column-holder">

<div class="table-outer">
<div class="table-inner">


<!-- start div grid -->
<div class="container">
    <div class="row">
        <div class="column">Column 0</div>
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
        <div class="column">Column 4</div>
        <div class="column">Column 5</div>
        <div class="column">Column 6</div>
        <div class="column">Column 7</div>
        <div class="column">Column 8</div>
        <div class="column">Column 9</div>
    </div>
    <div class="row">
        <div class="column">Column 0</div>
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">
        <div class="blockdata"> block data</div>
        </div>
        <div class="column">Column 4</div>
        <div class="column">Column 5</div>
        <div class="column">Column 6</div>
        <div class="column">Column 7</div>
        <div class="column">Column 8</div>
        <div class="column">Column 9</div>
    </div>
    <div class="row">
        <div class="column">Column 0</div>
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
        <div class="column">Column 4</div>
        <div class="column">Column 5</div>
        <div class="column">Column 6</div>
        <div class="column">Column 7</div>
        <div class="column">Column 8</div>
        <div class="column">Column 9</div>
    </div>

</div>
<!-- end div grid -->

</div>
</div>
</div>

第0列
第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
第0列
第1栏
第2栏
块数据
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
第0列
第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏

这与z索引无关。.blockdata的唯一后台属性是：

background:-moz线性渐变（中间顶部，#FFFFFF 0%，#EEEEEE）重复滚动0 0 rgba（0,0,0,0）

因此，在除firefox之外的其他浏览器中，div是透明的：D

你的解决方案可行，我关注的是z指数，出于某种原因，它似乎是个问题。对于gradient上的其他浏览器支持，我从中获取了一些CSS，否则您的修复是正确的none-moz线性渐变支持。更新版本：感谢您的快速回复。