十四像素

firefox3.0的表格边框叠加Bug及其解决方案

4月 3rd, 2009

1 comment

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

先看看bug（请使用firefox3.0）：

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>firefox3.0的表格边框叠加Bug</title> </head> <style> * { margin:0; padding:0; list-style:none; } body { background:#fff; color:#000; font-size:14px; font-family:simsun; margin:1px;} table { border-collapse:collapse; width:100%;} th,td { border:1px solid #000; padding:3px; line-height:16px;} th { background:#eee;} </style type="text/css"> <body> <table> <thead> <tr> <th>名称</th> <th>类型</th> <th>编剧</th> <th>导演</th> <th>语言</th> </tr> </thead> <tbody> <tr> <td>Heroes</td> <td>科幻</td> <td>-</td> <td>Allan Arkush / Greg Beeman</td> <td>英语</td> </tr> <tr> <td>The 4400</td> <td>科幻</td> <td>-</td> <td>-</td> <td>英语</td> </tr> <tr> <td>Prison Break</td> <td>悬疑</td> <td>Paul Scheuring</td> <td>Brett Ratner</td> <td>英语</td> </tr> <tr> <td>lost</td> <td>悬疑</td> <td>-</td> <td>J.J. Abrams</td> <td>英语</td> </tr> </tbody> </table> </body> </html>

提示：你可以先修改部分代码再运行。

描述：为了更清晰地看出table边框情况，我们给body以margin:1px，而在firefox3.0中，table却并未显示1px的上边距和1px的左边距。

危害：这微不足道的1px，足以影响到该table盒模型的实际宽度，继而可能在某些部分导致页面错位。

解决方法：td和th的边框仅设置右侧方向和底部方向，用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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>firefox3.0的表格边框叠加Bug</title> </head> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { background:#fff; color:#000; font-size:14px; font-family:simsun; margin:1px;} table { border-collapse:collapse; width:100%;} th,td { border-right:1px solid #000; border-bottom:1px solid #000; padding:3px; line-height:16px;} th { background:#eee;} .table { border-top:1px solid #000; border-left:1px solid #000;} </style> <body> <div class="table"> <table> <thead> <tr> <th>名称</th> <th>类型</th> <th>编剧</th> <th>导演</th> <th>语言</th> </tr> </thead> <tbody> <tr> <td>Heroes</td> <td>科幻</td> <td>-</td> <td>Allan Arkush / Greg Beeman</td> <td>英语</td> </tr> <tr> <td>The 4400</td> <td>科幻</td> <td>-</td> <td>-</td> <td>英语</td> </tr> <tr> <td>Prison Break</td> <td>悬疑</td> <td>Paul Scheuring</td> <td>Brett Ratner</td> <td>英语</td> </tr> <tr> <td>lost</td> <td>悬疑</td> <td>-</td> <td>J.J. Abrams</td> <td>英语</td> </tr> </tbody> </table> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Chomo xhtml+css bug, FF3, xhtml+css

Archive

firefox3.0的表格边框叠加Bug及其解决方案

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

Archive

firefox3.0的表格边框叠加Bug及其解决方案

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边