CSS/Firefox/Mac - div内の奇妙な垂直スクロールの動作

Question

私は非常に奇妙な問題があります。これはMac上のFirefoxにのみ影響します（これまでの私が知っている限り）が、水平スクロールのみであるはずのdiv内では、垂直方向にもスクロールすることができます。 2番目の "container" divの下に ""を "min-height"を.container（これはすべてのブラウザに表示されます）に変更すると表示される余分な「パディング」があるようです。私が達成しようとしているのは、複数のdiv（2番目のコンテナdivの色付きスタック）をposition: relativeを使って "スタック" "重ねる"ようにすることですが、余分な "パディング"私を取り除くことができない。 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> 

それとも、ここでは、コードで遊ぶことができます：私はOS XでのFirefoxを使用していますし、それは私のためにそれをしませんhttp://jsfiddle.net/bAzND/

Answer 1

私は私のジレンマの解決策を見つけたと思う。今後誰かがこの問題に遭遇した場合は、のすべての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/

Answer 2

。

Firefoxのバージョンは3.6.13です。 OS Xは10.6.6です。私はマックブック2,1にいます。