Question

我有一个div设置为溢出：auto，max-width为250px。

在div中我有一个分页控件，允许用户回退10,20,50或100个结果。如果他们撤回足够的结果，内部内容（表）将比div大，然后应该可滚动。

这在Firefox 3.5和IE8中运行良好，但是在IE7中，滚动条仅显示在需要滚动条的第一个回发之后（例如用户选择20）。如果用户然后选择另一个需要滚动条（50,100）的金额，则IE7中的条将消失。

如果用户返回10个结果（不需要滚动），则进入20个结果（需要滚动）滚动条将再次显示在IE7中。

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

任何人都知道问题是什么？我很难过......如果需要可以提供细节。

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

Answer 1

将CSS属性overflow从auto更改为scroll

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

Answer 2

我有类似的问题并设法解决它。现在，了解我将表的宽度设置为100％。我认为问题与doctype有关。我尝试将doctype设置为

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

我仍然遇到同样的问题。只有在删除了doctype声明之后IE7的bug才会消失（怪癖模式，我不推荐）。我还使用XHTML 1.0 / 1.1 / HTML 4.01 doctype声明（Strict，Transitional，Frameset）测试了它，并且出现了同样的问题。出现此问题是因为使用doctype声明会告诉浏览器使用标准模式。 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>

滚动条在IE7中消失

2 个答案: