Question

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

我遇到的问题似乎与浏览器之间的z-index有关。这段代码在Firefox中看起来是正确的，但在目前为止我测试的IE或Chrome中无效。我想知道如何通过CSS正确地浮动我的DIV看到类＆＃34; .blockdata＆＃34;在我的DIV周围设置显示：table并将继续允许溢出滚动。

要查看差异，请检查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的唯一背景属性是：

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

所以除了firefox之外的其他浏览器中div是透明的：D

http://jsfiddle.net/eLz73/

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

1 个答案: