解决IE6、7、8中的按钮、select边框背景色

最新推荐文章于 2021-06-11 11:32:14 发布

huang100qi

最新推荐文章于 2021-06-11 11:32:14 发布

阅读量1.2w

点赞数 1

文章标签： ie border xhtml button html 浏览器

本文链接：https://blog.csdn.net/huang100qi/article/details/7931811

版权

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

参与测试的浏览器：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>

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

让Select在IE下去掉边框

<select style="border:none">
<option value="1">111</option>
<option value="2">222</option>
</select>
这样显示的时候，在ie5，6，7，8都会有边框，解决办法:
<div style="overflow:hidden;border:none;display:inline;position:absolute;">
<select style="border:none;margin:-1px;">
<option value="1">111</option>
<option value="2">222</option>
</select>
</div>
但是这样后，下面的元素会被这个绝对定位的div给覆盖掉。
而且元素本身也发生了位移，进一步的解决：
<div style="overflow:hidden;border:none;display:inline;position:relative; margin-top:3px;">
<select style="border:none;margin:-1px;">
<option value="1">111</option>
<option value="2">222</option>
</select>
</div>
后面的元素的 position属性页定义为： relative 这样就避免了被叠加覆盖的问题。

huang100qi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
解决IE6、7、8中的按钮、select边框背景色

解决IE6与IE7中的按钮多出1px的内边框问题参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ][操作系统：Windows]自古多情空余恨——这话太适合形容我此时此刻的心情，IE6/IE7这俩自作多情的浏览器经常让我愤恨不已。这故事、这bug是这样的：默认的按钮我不爱它，所以我想给它一个我觉得漂亮的背景，但是长度又
复制链接

扫一扫