当前位置：首页 → 问答吧 → WebKit表格宽度问题

WebKit表格宽度问题

时间：2011-07-10

来源：互联网

操作系统 Win 2003 R2 SP2
如下代码，在 Safari 5.0.5、Chrome 9下，第5个表格的线会与DIV线的不重叠(原本应该是重叠，现在却变成相邻)
如果把TABLE的WIDTH设置为auto，则不会出现上述现象。
设置为auto后，获取到的TABLE clientWidth为1477px，但即使在1477px左右浮动，不管怎么设置，就是无法达到auto的效果...但...我一定要设置TABLE宽度的啊...
而且当单元格间的间隔越大时(比如把第一个单元格设置为500px宽度，当然，TABLE和DIV的宽度也要相应加大)，本应该重叠的线就越少，这到底是怎么回事呢？？其他浏览器都是正常的哦...

<!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>new page</title> <style type="text/css">  </style> </head> <body style="width:2000px;"> <div style="position:absolute; left:0px; top:0px; width:1478px; height:300px; border:0 none;"> <div class="line" style="width:150px; border-left:1px solid #000;"></div> <div class="line" style="width:200px;"></div> <div class="line" style="width:180px;"></div> <div class="line" style="width:250px;"></div> <div class="line" style="width:180px;"></div> <div class="line" style="width:190px;"></div> <div class="line" style="width:320px;"></div> </div> <table border="1" borderColor="#000" style="width:1478px;"> <tbody> <tr> <td style="width:150px;">abc</td> <td style="width:200px;">abc</td> <td style="width:180px;">abc</td> <td style="width:250px;">abc</td> <td style="width:180px;">abc</td> <td style="width:190px;">abc</td> <td style="width:320px;">abc</td> </tr> <tr> <td style="width:150px;">abc</td> <td style="width:200px;">abc</td> <td style="width:180px;">abc</td> <td style="width:250px;">abc</td> <td style="width:180px;">abc</td> <td style="width:190px;">abc</td> <td style="width:320px;">abc</td> </tr> <tr> <td style="width:150px;">abc</td> <td style="width:200px;">abc</td> <td style="width:180px;">abc</td> <td style="width:250px;">abc</td> <td style="width:180px;">abc</td> <td style="width:190px;">abc</td> <td style="width:320px;">abc</td> </tr> <tr> <td style="width:150px;">abc</td> <td style="width:200px;">abc</td> <td style="width:180px;">abc</td> <td style="width:250px;">abc</td> <td style="width:180px;">abc</td> <td style="width:190px;">abc</td> <td style="width:320px;">abc</td> </tr> </tbody> </table> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 consatan 于 2011-7-10 19:06 编辑 ]

作者: consatan 发布时间: 2011-07-10

.........通过CHROME的调试器查看
在width:auto情况下，各单元格宽度依次为
151、201，181，251，181，191，321 加起来是1477px，这是TR、TBODY的宽度，TABLE为1478px

但是...当width:1478px情况下，各单元格宽度却变为
151、201、181、252、181、190、321 加起来一样是1477px(TR、TBODY)，TABLE依然为1478px...
但想不通...为什么它那么自做多情的把表格宽度变成这样？？

如果在HTML里把各单元格宽度都加上1px的话，那CHROME和SAFARI就“完美”了...
但在其他浏览器却出问题了...

[ 本帖最后由 consatan 于 2011-7-10 19:43 编辑 ]

作者: consatan 发布时间: 2011-07-10

WebKit表格宽度问题

热门阅读

热门下载