CSS div容器显示: table with floating div

Question

我有以下 CSS DIV 表格网格，需要一个 DIV 跨越多个 DIV

我遇到的问题似乎与浏览器之间的 z-index 有关。这段代码在 Firefox 中看起来是正确的，但在我目前测试过的 IE 或 Chrome 中不起作用。我想知道如何通过 CSS 正确 float 我的 DIV，请参阅我的 DIV 周围的类“.blockdata”，该类设置为显示:表格并将继续允许溢出滚动。

要查看区别，请先在 Firefox 中检查，然后在 Chrome 或 IE 中检查。

您可以在此处查看我的示例:http://jsfiddle.net/LjMhs/

这是我的 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;  
}

这是使用 DIV 的 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>

Answer 1

这与 z-index 无关。 .blockdata 的唯一背景属性是:

背景:-moz-linear-gradient(center top , #FFFFFF 0%, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);

所以在除 firefox 之外的其他浏览器中，div 是透明的:D

http://jsfiddle.net/eLz73/