我有以下CSS DIV表网格,该网格需要DIV跨多个DIV
我遇到的问题似乎与浏览器之间的z-index有关。该代码在Firefox中看起来是正确的,但到目前为止我测试过的IE或Chrome中都无法使用。我想知道如何通过CSS正确浮动我的DIV,请参见DIV周围的类“ .blockdata”,该类设置为display: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>
最佳答案
这与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 - CSS div容器显示:具有 float div的表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23353003/