十四像素

Home > xhtml+css > 解决IE6与IE7中的按钮多出1px的内边框问题

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

5月 9th, 2009

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

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

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

<!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>IE6/IE7下按钮多了1px白色内边框</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} body { background:#fff;} button { height:59px; font-size:30px; font-family:Vernada; padding:0 30px; color:#fff; overflow:visible; border:1px solid #000; background:url(http://www.14px.com/wp-content/uploads/2009/05/buttonbg.gif);} </style> </head> <body> <button>IE6/IE7下，它多了1px白色内边框 T_T</button> </body> </html>

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

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

<!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>IE6/IE7下按钮多了1px白色内边框</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} body { background:#0c0;} button { height:59px; font-size:30px; font-family:Vernada; padding:0 30px; color:#fff; overflow:visible; border:1px solid #000; background:url(http://www.14px.com/wp-content/uploads/2009/05/buttonbg.gif);} </style> </head> <body> <button>原来这个内边框是透明</button> </body> </html>

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

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

<!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>没border就好了 ^-^</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} body { background:#0c0;} span { border:1px solid #000; display:inline-block; height:59px; line-height:59px;} button { height:59px; border:none; font-size:30px; font-family:Vernada; padding:0 30px; color:#fff; overflow:visible; background:url(http://www.14px.com/wp-content/uploads/2009/05/buttonbg.gif);} </style> </head> <body> <span><button>没border就好了 ^-^</button></span> </body> </html>

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

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

Comments (5) Trackbacks (0) Leave a comment Trackback

ytzong

5月 10th, 2009 at 10:04 | #1

Reply | Quote

不错，有创意
s.w

5月 11th, 2009 at 09:28 | #2

Reply | Quote

纠结的问题，我都直接再定个背景色～···很无赖～···
chomo

5月 11th, 2009 at 11:29 | #3

Reply | Quote

@s.w
我也是直接定个背景色，囧，系统项目不比一般的web，多加个span会被人海扁。
淘宝网手机

12月 8th, 2009 at 18:06 | #4

Reply | Quote

纠结的问题，我都直接再定个背景色～···很无赖～···
generic cialis tadalafil 120 tabs

12月 18th, 2009 at 07:23 | #5

Reply | Quote

Perfect work!

No trackbacks yet.

对主流浏览器“半个像素”渲染差异分析 float-left的对象如何居中

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

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

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

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边