Css 输入类型="；“图像”；在Chrome中显示不需要的边框，在IE7中显示断开的链接

我还没有找到解决办法

我什么都试过了

border:0;
border:none;
outline:none;

没有任何运气…有趣的是IE7中的断开链接图标与我的图像重叠

有什么建议吗？

HTML（由WordPress生成）

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

属性

参考：和

试试这个

a:active {
 outline: none;
}
a:focus {
 -moz-outline-style: none;
}
a, input {
 outline-color: invert;
 outline-style: none;
 outline-width: medium;
}

---

Chrome、IE和Safari愚蠢地解析代码

<input type="image" src="bleh.png">
<input type="image" src="bleh.gif">

这些浏览器对的分析与

<input type="image" src="bleh.png"><input type="image" src="bleh.gif">

---

将所有图像输入放在编码文档的同一物理行上。在我意识到这一点之前，我几乎用同样的问题在我的显示器上打了一个完整的孔。

作为参考，如果你想坚持使用CSS为按钮提供一个图像，比如提供：hover或：active规则，你可以保持代码不变，并将按钮添加为一个不可见的图像，我选择了：

---

这意味着它是一个完全透明的图像，大小似乎无关紧要，但我选择了1px乘1px。

这很难看，但它可以工作

<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />

这对我很有用：

input[type="image"]:focus {
    outline: none;
}

---

还有你看到的链接或屏幕截图。你为什么不使用标签呢？你能改变

边框吗：0至
边框：无给我？我正在用chrome检查它。@Stephen我用下面的解决方案解决了它，尽管我在另一个网站上只使用了CSS，并且没有任何问题（页面验证）。如果您使用Chrome并安装了FireBug Lite，您可以像在Firefox中一样动态编辑CSS。非常感谢，无论如何，出于ie6兼容性的考虑，它应该是一个不可见的gif。这有点旧了。但现在，你不必使用gif。您也可以只使用8位PNG，这是IE支持的。当通过类将css精灵用作背景图像时，这也很有用。透明的gif引用去掉了Chrome中的边框。顺便说一句，我更喜欢.gif，因为它的大小不到png的一半（可能是因为容器标题），这是一个Chrome/Safari错误。当您给它一个src属性时，不会显示任何图像，而是只渲染图像周围的灰色框。获取图像的唯一方法是使用背景图像-这总是会给你一个不需要的灰色框。这也没有任何用处
<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />

input[type="image"]:focus {
    outline: none;
}