日期:2014-05-17  浏览次数:20756 次

冰天雪地全身赤裸一丝不挂五体投地跪求解决ie9的问题
遇到个ie9兼容性问题,恳求大鸟和达人指教一下

div会被自动撑开,现在需求是要div横向滚动,但hover或点checkbox时会被撑开,ie9标准模式下

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {
    border:1px solid red;
    overflow:auto;
    zoom:0;
}
tabel {
    width:100%;
}
tr:hover {
    background:#ddd;
}
td {
    height:25px;
    border:1px solid #ddd;
    white-space:nowrap;
}
</style>
</head>
<body>
<div>
  <table>
      <tr>
        <td><input type="checkbox" /></td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>werqwer</td>
        <td>wer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>werqwer</td>
        <td>wer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
        <td>werwqer</td>
        <td>qwerqwrwqerqwerqwerqwerqwerqwerqwerqwrqwerqwer</td>
        <td>qwerqwer</td>
      </tr>
  </table>
</div>
</body>
</html>







------解决方案--------------------
探讨

overflow:auto;去掉。。

------解决方案--------------------
真心帮不了你,
在FF上是正常的。
别外提下 overflow-X,overflow-Y,overflow..
如果只要 横向滚动 ,建议用 overflow-X.
------解决方案--------------------
网上找的解决方案

 ie9 scrollbar中hover 高度增高的bug
 http://www.cnblogs.com/NetSos/archive/2011/11/04/2235750.html

建议采用JS+CSS做效果,兼容性更好,IE6只支持a:hover
------解决方案--------------------
固定div的宽度