Question

我有以下小样本：

<!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";

由于

Answer 1

这似乎是IE9中的一个错误，它处理overflow-x：auto。添加显示：内联块到css为div工作对我来说很棒。来源：

Internet Explorer 9's magically expanding div

Answer 2

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

overflow: auto;
overflow-x:scroll;

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

IE9错误？神秘地增长的DIV

2 个答案: