CSS / Firefox / Mac - div中奇怪的垂直滚动行为

时间:2011-02-20 06:55:17

标签: css

我有一个非常奇怪的问题。这只会影响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/

2 个答案:

答案 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/