我还没有找到解决方案…
我尝试了一切
border:0; border:none; outline:none;
没有任何运气…有趣的是IE7中的链接断开图标与我的图像重叠。
有什么建议吗?
HTML(由WordPress生成)
<form id="searchform" method="get" action="http://eezzyweb.com/"> <div> <input id="s" name="s" type="text" value="" size="32" tabindex="1"/> <input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/> </div> </form>
CSS
input#s{ position:relative; width:245px; height:28px; border:0; vertical-align:bottom; background:url(images/input-search-bkg.png) 0 0 no-repeat; } #searchsubmit { display:inline-block; background:url(images/submit-bkg.png) 0 0 no-repeat; width:30px; height:30px; border:0; vertical-align:bottom; }
Firefox和Opera可以正常显示图像按钮,但是在Chrome和Safari中,它周围有灰色边框。IE 7和8在我的图像上添加了一个符号(破图标?)…我感到困惑。
您正在使用图像作为背景。为什么不将其设置为按钮的src属性?
<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>
当您将设置type为image输入时,也需要一个src属性。
type
image
src