2012-12-18 33 views
0

我想在div上使用属性overflow:auto和setting overflow:在body上隐藏一个滚动条。它适用于Chrome,但不适用于Firefox和IE。如何在Firefox和IE中显示滚动条?

任何人都可以解释为什么这个代码有2种不同的行为?

<html lang="en" class="fillScreen" dir="ltr"><head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 



    <link rel="stylesheet" href="template4.css" type="text/css"> 

    <style> 

     .fillScreen { 
      bottom:0px; 
      height:100%; 
     } 

     html, body { 
      margin: 0; padding: 0; 
      height: 100%; 
      overflow: hidden; 
     } 


    </style> 

    </head> 

    <body class="fillScreen"> 

    <div class="fillScreen" style="display:table;width:100%"> 

     <div class="fillScreen" style="display:table-row"> 

      <div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >    

        <div class="fillScreen" style="display:table;width:100%;overflow:auto">    

         <div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">    

          <div class="fillScreen" style="display:table-cell">    
           <div class="fillScreen" style="position:relative"> 

            <button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button> 

           </div> 
          </div>   

         </div> 

        </div> 

      </div> 
     </div> 

    </div> 

</body> 
</html> 

有可能在这里进行测试调整窗口大小时http://jsfiddle.net/nMSvv/2/ 滚动条apears在Chrome中。

我补充一点,我绝对需要显示与绝对位置的按钮,需要不断的div

的这种结构非常感谢您的帮助

+2

我没有看到任何滚动条,即使在镀铬 –

+1

萨调整时我在这里,Windows上的Chrome 23没有像FF那样的滚动条。 – mikel

回答

0

的解决方案是在这里:http://jsfiddle.net/nMSvv/3/

我需要包,我想用一个滚动条的div:

<div class="fillScreen" style="position:relative;overflow:auto">    
    <div style="position:absolute;top:0px;left:0px"> 

    </div> 
</div> 
相关问题