我有一个非常奇怪的问题。这只会影响Mac上的Firefox,使用触控板(据我所知),但在div应该只是水平滚动的内部,你也可以垂直滚动。在第二个“container
”div下方似乎有一些额外的“填充”,如果您在height
中将“min-height
”更改为“.container
”,则可以看到将出现在所有浏览器上)。所有我想要完成的是使用position: relative
将多层div(第二个容器div中的彩色堆栈)“堆叠”在彼此之上,但它似乎创建了额外的,不需要的“填充” “我无法摆脱。 Chrome和IE都不会出现此行为。
<style>
#scrolling_div {
border:2px solid black;
clear:both;
float:left;
overflow-x:auto;
overflow-y:hidden;
width:400px;
}
.container { border:1px dotted black;height:150px;margin:5px }
.other { width:100px }
#stack1,#stack2,#stack3 { height:150px;width:100px; }
#stack1 { background-color:red;top:-300px;margin-left:60px;position:relative;z-index:1 }
#stack2 { background-color:green;top:-150px;margin-left:30px;position:relative;z-index:2 }
#stack3 { background-color:blue;top:0px;margin-left:0px;position:relative;z-index:3 }
</style>
<div style='float:left;clear:right'>some text</div>
<div id='scrolling_div'>
<table>
<tr>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container">
<div id="stack3"><div style='margin-left:90px'>3</div></div>
<div id="stack2"><div style='margin-left:90px'>2</div></div>
<div id="stack1"><div style='margin-left:90px'>1</div></div>
</div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
</tr>
</table>
</div>
<div style='float:left;clear:left'>some text</div>
或者您可以在此处使用代码:http://jsfiddle.net/bAzND/
答案 0 :(得分:0)
我在os x上使用firefox并且它不会对我这样做。
Firefox版本是3.6.13; OS X是10.6.6。我正在使用macbook 2,1。
答案 1 :(得分:0)
我想我找到了解决我的困境的方法。如果将来有其他人遇到此问题,解决方案是将所有“stack
”div从position:relative
更改为position:absolute
,删除top
属性,然后将style='position:relative;width:160px'
添加到堆栈的.container
<div>
。 width
必须是固定值。
以下是代码:
<style>
#scrolling_div {
border:2px solid black;
clear:both;
float:left;
overflow-x:auto;
overflow-y:hidden;
width:400px;
}
.container { border:1px dotted black;height:150px;margin:5px }
.other { width:100px }
#stack1,#stack2,#stack3 { height:150px;width:100px; }
#stack1 { background-color:red;margin-left:60px;position:absolute;z-index:1 }
#stack2 { background-color:green;margin-left:30px;position:absolute;z-index:2 }
#stack3 { background-color:blue;margin-top:0px;margin-left:0px;position:absolute;z-index:3 }
</style>
<div style='float:left;clear:right'>some text</div>
<div id='scrolling_div'>
<table>
<tr>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container" style='position:relative;width:160px'>
<div id="stack3"><div style='margin-left:90px'>3</div></div>
<div id="stack2"><div style='margin-left:90px'>2</div></div>
<div id="stack1"><div style='margin-left:90px'>1</div></div>
</div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
<td>
<div class="container"><div class="other">test</div></div>
</td>
</tr>
</table>
</div>
<div style='float:left;clear:left'>some text</div>
以下是固定代码示例:http://jsfiddle.net/ChSfE/