有一个带有溢出的 Div: auto;如果屏幕变小，IE8和Firefox中都会出现垂直滚动条，但IE8中不会滚动

发布于 2024-11-23 18:55:08 字数 1311 浏览 1 评论 0原文

我正在开发一个模态“框”，以浮动在页面的其余部分上并使页面的其余部分变灰。

我遇到了 IE 的 z-order bug，已经解决了这个问题。

该 DIV 名为“overlay”，它使用一个 CSS 类（也称为“overlay”），如下所示：

border: 4px double black;
padding: 6px;
visibility: hidden;
z-index: 3000;
position: fixed;
display: block;
font-family: Arial,Helvetica,sans-serif;
background-color: #3366ff;
color: white;
overflow: auto;
text-align: left;
max-width: 50%;
max-height: 90%;

有一个名为“grayout”的 div，用于将页面的其余部分变灰。

我使用一些 writeln 语句生成 div，以便尝试正确处理 IE6。不管怎样，生成的代码是没有问题的，你可以用IE8开发者工具或者火狐浏览器的Firebug看看就没事了，至于as语法。

我将在我的系统上的测试页面中对 div 进行硬编码，以确保动态创建不会导致此问题。如果是的话我会发回这里。

我遇到的问题是，如果我将浏览器窗口设置得足够小，IE8 会显示一个垂直滚动条，但它不起作用 - 单击滚动条不会执行任何操作。

它在 Firefox 3.6.17 上运行良好

您可以在 http://www.bobnovell.com 测试该页面/test/modalemailtext.html

当您加载页面时，“框”将可见。单击“电子邮件”按钮或“关闭窗口”按钮（位于右上角），该框将关闭。

重新加载页面以使该框再次可见。

当该框可见时，调整浏览器窗口的大小，使整个框不可见。当您调整窗口大小时，IE8 和 Firefox 3.6.17 都会自动显示垂直滚动条，但滚动条不适用于 IE8。它与 Firefox 配合得很好。您还可以尝试在缩小窗口大小后重新加载页面 - 它不会改变症状。

我在忽略什么？

我制作了一个测试页面，上面没有任何内容，只有一个具有相同 CSS 类的 div 并输入了一些文本。当我减小窗口的大小以获得滚动条时，滚动条在 IE8 和 Firefox 中都可以工作 - 所以问题出在页面的其他部分，这可能与覆盖 div 定义无关。

请记住，这是一项“正在进行的工作”，因此我还没有真正清理页面上的其他内容。这也是对想法的一种测试。

原文

I am working on a modal "box" to float over the rest of a page and to gray out the rest of the page.

I ran into IE bug with z-order by have resolved that issue.

The DIV, named overlay, uses a CSS class, also named overlay, which is as follows:

border: 4px double black;
padding: 6px;
visibility: hidden;
z-index: 3000;
position: fixed;
display: block;
font-family: Arial,Helvetica,sans-serif;
background-color: #3366ff;
color: white;
overflow: auto;
text-align: left;
max-width: 50%;
max-height: 90%;

There is a div named grayout which is used to, well, grayout the rest of the page.

I'm generating the div's with some writeln statements in order to try and handle IE6 correctly. Regardless, there is no problem with the generated code, you can look at it with IE8 Developer Tools or Firefox with Firebug and it is just fine, as for as syntax.

I'm going to hard code the div's, in a test page on my system, to make sure the dynamic creation is not causing this problem. I will post back here if it is.

The problem I've run into is that IE8 displays a vertical scroll bar, if I make the browser window small enough, but it does not work - clicking on the scroll bar does nothing.

It works fine with Firefox 3.6.17

You can test the page at http://www.bobnovell.com/test/modalemailtext.html

When you load the page, the "box" will be visible. Click either the Email button or the Close Window button (in the upper right corner) and the box will close.

Reload the page to get the box visible again.

When the box is visible, resize the browser window such that the entire box is not visible. Both IE8 and Firefox 3.6.17 automatically show the vertical scroll bar when you resize the window but the scroll bar does not work with IE8. It works just fine with Firefox. You can also try reloading the page after you reduce the size of the window - it does not change the symptoms.

What am I overlooking?

I made a test page with nothing on it but a div with same CSS class and put in some text. When I reduce the size of the window to get the scroll bar, the scroll bar works in both IE8 and Firefox - so the problem lies with some other part of the page, something which, perhaps, is independent of the overlay div definition.

Bear in mind that this is a "work in progress" and as such I've not really cleaned up other things on the page, yet. Also this is sort of a test of ideas.

分享到QQ

分享到微博