标准ie8下，出现滚动条，但是没有滚动块的解决方法

来源：互联网发布：出纳软件编辑：程序博客网时间：2024/05/22 10:46

Html代码

<table width="100%" border="1" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="100%"><tbody><tr><td><span>全称</span></td><td><span>简称</span></td><td><span>地址</span></td><td><span>销售量</span></td></tr></tbody></table></td></tr><!--标题结束--><tr><td><div style="overflow-x: hidden; overflow-y: auto; width: 100%; height: 295px;"><table width="100%" border="1" cellpadding="0" cellspacing="0"><tbody><tr><td><span>IBM 中国有限公司 </span></td><td><span>IBM</span></td><td><span>北京市朝阳区工体北路甲 2号 盈科中心 IBM 大厦，25层</span></td><td><span>3</span></td></tr><tr><td><span>微软(中国)有限公司</span></td><td><span>微软</span></td><td><span>北京市朝阳区霄云路38号盛世大厦19层</span></td><td><span>2</span></td></tr><tr><td><span>移动公司</span></td><td> <span>北京移动</span></td><td> <span></span></td><td> <span>1</span></td></tr><tr><td rowspan="11"> <span>联通公司</span></td><td> <span>上海联通</span></td><td> <span></span></td><td> <span>5</span></td></tr><tr><td> <span>北京联通</span></td><td> <span></span></td><td> <span>4</span></td></tr><tr><td> <span>哈尔滨联通</span></td><td> <span></span></td><td> <span>10</span></td></tr><tr><td> <span>天津联通</span></td><td> <span></span></td><td> <span>12</span></td></tr><tr><td> <span>广州联通</span></td><td> <span></span></td><td> <span >6</span></td></tr><tr><td> <span>拉萨联通</span></td><td> <span></span></td><td> <span>11</span></td></tr><tr><td> <span>杭州联通</span></td><td> <span></span></td><td> <span>8</span></td></tr><tr><td> <span>海南联通</span></td><td> <span></span></td><td> <span>14</span></td></tr><tr><td> <span>深圳联通</span></td><td> <span></span></td><td> <span>7</span></td></tr><tr><td> <span>苏州联通</span></td><td> <span></span></td><td> <span>9</span></td></tr><tr><td> <span>青岛联通</span></td><td> <span></span></td><td> <span>13</span></td></tr></tbody></table></td></tr></tbody></table>

IE8下现象（标准ie8才会出现）

然而在ie的其他模式下不会出现这样的问题。

分析：

理论上因为下面table的宽度没有超过屏幕的宽度，不会出现滚动条，但是在ie8下却出现了，而且还没有滑动块，如果去掉rowspan属性，则正常，但是如果去掉rowspan属性就的重新修改布局。

经过查找属性，发现如果数据表外层的div元素的overflow-y导致的，如果去掉则正常。

解决方法：

使用js，来比较存放数据表的div的高度和数据表table的高度，如果div的高度大于数据表table的高度，使用js去掉overflow-y属性，反之则加上overflow-y：auto属性，问题得到了解决

0 1