Question

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

Answer 1

我在os x上使用firefox并且它不会对我这样做。

Firefox版本是3.6.13; OS X是10.6.6。我正在使用macbook 2,1。

Answer 2

我想我找到了解决我的困境的方法。如果将来有其他人遇到此问题，解决方案是将所有“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/

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

2 个答案: