十四像素

解决IE6与IE7中的按钮多出1px的内边框问题

5月 9th, 2009

5 comments

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

自古多情空余恨——这话太适合形容我此时此刻的心情，IE6/IE7这俩自作多情的浏览器经常让我愤恨不已。
这故事、这bug是这样的：

默认的按钮我不爱它，所以我想给它一个我觉得漂亮的背景，但是长度又不一致，所以就加个border，然后弄个可以repeat-x的background-image。
结果：IE6/IE7出现了1px的白色内边框。

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

^-^ 改变了一下body的背景，发现原来这个内边框其实不是白色的，而是透明的。

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

唔，幸亏是透明的，于是解决方案很快就找到啦：

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

Chomo xhtml+css bug, IE6/IE7, xhtml+css, 按钮, 表单元素

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

解决IE6与IE7中的按钮多出1px的内边框问题

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

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

Archive

解决IE6与IE7中的按钮多出1px的内边框问题

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

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边