gpt4 book ai didi

html - 如何在Firefox 和IE 中显示滚动条?

转载 作者:行者123 更新时间:2023-11-28 13:27:56 27 4
gpt4 key购买 nike

我想在 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 的这种结构

谢谢你的帮助

最佳答案

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

我需要将 div 包裹在我想要滚动条的地方:

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

</div>
</div>

关于html - 如何在Firefox 和IE 中显示滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13932847/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com