IE7下滚动条消失

发布于 2024-08-24 11:45:38 字数 425 浏览 9 评论 0原文

我有一个 div 设置为溢出：自动，最大宽度为 250px。

在 div 内部有一个分页控件，它允许用户拉回 10、20、50 或 100 个结果。如果他们拉回足够的结果，内部内容（表格）将变得比 div 更大，然后应该可以滚动。

这在 Firefox 3.5 和 IE8 中工作正常，但在 IE7 中，滚动条仅在需要滚动条的第一次回发后显示（例如用户选择 20）。如果用户随后选择需要滚动条的另一个数量 (50, 100)，则 IE7 中的滚动条将会消失。

如果用户返回到 10 个结果（不需要滚动），然后继续到 20 个结果（需要滚动），滚动条将再次显示在 IE7 中。

我仍然可以用鼠标滚轮滚动内部内容，只是没有滚动条。

有人知道可能是什么问题吗？我很困惑...如果需要可以提供详细信息。

澄清：即使内容溢出 Div，滚动条也会消失。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城之時有危險 2024-08-31 11:45:38

将 CSS 属性 overflow 从 auto 更改为 scroll

请参阅 http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow

回复收藏 0 原文

堇色安年 2024-08-31 11:45:38

我有类似的问题并设法解决它。现在，了解我将表格的宽度设置为 100%。我相信问题与文档类型有关。我尝试将文档类型设置为

<!DOCTYPE html> <!-- HTML5 -->

，但仍然遇到同样的问题。只有在删除 doctype 声明后，IE7 错误才消失（怪癖模式，我不推荐这种模式）。我还使用 XHTML 1.0/1.1/HTML 4.01 文档类型声明（严格、过渡、框架集）对其进行了测试，并且出现了相同的问题。出现此问题的原因似乎是使用文档类型声明告诉浏览器使用标准模式。 IE7 及更低版本不能很好地处理标准模式浏览。

为了解决 IE7 的问题，我将宽度设置为 99%。

这是工作示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  #Content
  { 
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
    width: 100px;
  }
</style>
</head>
<body>
  <div id="Content">
    <table width="99%" border="1">
      <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to

<!DOCTYPE html> <!-- HTML5 -->

and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.

To resolve it for IE7, I set the width to 99%.

Here is working sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  #Content
  { 
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
    width: 100px;
  }
</style>
</head>
<body>
  <div id="Content">
    <table width="99%" border="1">
      <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~