我还没有找到解决方案
我试过一切
border:0; border:none; outline:none;
没有任何运气…而有趣的是IE7中破碎的链接图标与我的图像重叠.
任何建议?
link here
<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"/>
当您将类型设置为图像时,输入还需要一个src属性.
参考:http://www.w3.org/TR/html401/interact/forms.html#adef-src和http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1