CSS / Firefox / Mac - Weird vertical scrolling behavior inside div
I have a very weird problem. This ONLY affects Firefox on Mac, using the trackpad (so far as I know), but inside the div that is supposed to be horizontal scrolling only, you are able to scroll vertically too. There seems to be some extra "padding" below the 2nd "container
" div which you can see if you change "height
" to "min-height
" in .container
(this will show up on all browsers). All I'm trying to accomplish is to have multi-layered divs (the colored stack in the 2nd container div) "stack" on top of each other, using position: relative
, but it seems to create extra, un开发者_高级运维wanted "padding" that I'm unable to get rid of. Both Chrome and IE do not exhibit this behavior.
<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>
Or you can play with the code here: http://jsfiddle.net/bAzND/
I'm using firefox on os x and it doesn't do that for me.
Firefox version is 3.6.13; OS X is 10.6.6. I'm on a macbook 2,1.
I think I found the solution to my dilemma. In case anyone else runs into this issue in the future, the solution was to change all the "stack
" divs from position:relative
to position:absolute
, remove the top
attributes, then add style='position:relative;width:160px'
to the .container
<div>
of the stack. The width
must be a fixed value.
Here is the code:
<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>
Here is the fixed code example: http://jsfiddle.net/ChSfE/
精彩评论