3

我有以下小样本：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
    table.Sample { width: 600px; table-layout: fixed; }
    table.Sample col { width: 60px; }
    table.Sample td { height: 20px; line-height: 20px; padding: 0px; }
    table.Sample input { width: 55px; height: 17px; padding: 0px; margin: 0px; border-width: 1px; }
</style>
</head>
<body>
    <div id="scrollDiv" style="width: 400px; overflow: auto; background-color: #CCCCCC;">
        <table class="Sample">
            <colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /></colgroup>
            <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
            <tr><td><input type="text" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
            <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        </table>
    </div>
</body>
</HTML>

这在 IE8、IE10、Chrome、FireFox、Safari 上运行良好……但在 IE9 上会出错。

当我开始在文本框中输入内容时，div 的高度会增加。滚动条不移动，但 div 在滚动条下方增长。

我无法在 css 中定义 div 的高度，因为行数是可变的，而且我不确定滚动条是否会出现（因为在实际示例中列数是可变的）。

我可以使用以下 javascript 代码解决问题，但我想知道我做错了什么来引发错误。

var div = document.getElementById('scrollDiv');
div.style.height = div.offsetHeight  + "px";

谢谢

4

2 回答 2

4

这似乎是 IE9 中的一个错误，它处理溢出-x:auto 的方式。将 display:inline-block 添加到 div 的 css 对我来说非常有用。资源：

Internet Explorer 9 的神奇扩展 div

于 2013-10-10T17:16:22.693 回答
3

问题在于溢出，您可以在 scrollDiv 上使用这些 CSS 规则来修复它

overflow: auto;
overflow-x:scroll;

见这里：http ://cssdesk.com/BAYcp

于 2013-04-25T14:45:34.200 回答