近期在修改公司搜索页面的dtd时遇到 当div内的table出现纵向滚动条时,在ie6和ie7下 会把最后一个td的内容覆盖掉一部分,我当时的第一个解决办法是给ie6、7写hack 单独给table下了width:97%;但结果很不满意,后来还是我们经验丰富的part长给帮忙解决的,他在ie6、7下使用了 table-layout:fixed 和width:auto; 显示效果和其他浏览器一致,问题也解决了,但遗憾的是还是没有脱离hack ,哪位大侠有更好的解决方案也请留言指教。
下面是代码示例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table纵向滚动条</title> </head> <body> <div style="width:500px;height:200px;overflow:auto;overflow-x:hidden;border:1px solid #333;"> <!-- 在ie6、ie7 下使用table-layout:fixed和*width:auto可解决当div内表格出现纵向滚动条时截断最后一个td内容的bug --> <table border="1" style="table-layout:fixed; width:100%; *width:auto"> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> <tr> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> <td align="center">21222</td> </tr> </table> </div> </body> </html>