0

我想在 div 上使用属性 overflow:auto 并在 body 上设置 overflow:hidden 使用滚动条。它适用于 Chrome，但不适用于 Firefox 和 IE。

谁能解释我为什么这段代码有两种不同的行为？

<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/ 滚动条出现在 Chrome 中。

我补充说，我绝对需要显示具有绝对位置的按钮，并且需要保持这种 div 结构

感谢您的任何帮助

4

1 回答 1

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>
于 2012-12-18T13:25:15.073 回答