Question

我想在div上使用属性overflow：auto并在body上设置overflow：hidden来使用div滚动条。它适用于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的结构

感谢您的帮助

Answer 1

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

我需要将div包装在我想要滚动条的位置：

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

    </div>
</div>

如何在Firefox和IE中显示滚动条？

1 个答案: