IE9错误？神秘增长的DIV
IE9错误？神秘增长的DIV
提问于 2013-04-25 22:27:53
我有以下的小样本：
<!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";谢谢
回答 2
Stack Overflow用户
发布于 2013-10-11 01:16:23
这似乎是IE9处理overflow-x:auto的方式中的一个错误。将display:inline-block添加到div的css中对我来说很有效。来源：
Stack Overflow用户
发布于 2013-04-25 22:45:34
问题是溢出，你可以在你的scrollDiv上使用这些CSS规则来修复它。
overflow: auto;
overflow-x:scroll;查看此处：http://cssdesk.com/BAYcp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16217455
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号