在 Safari 和 Chrome 中提交图像边框？答案

【问题标题】：Submit image border in Safari and Chrome?在 Safari 和 Chrome 中提交图像边框？
【发布时间】：2023-03-20 15:20:01
【问题描述】：

我有一个提交图片按钮：

 <input id="sbutton" type="image" value="&nbsp;" />

风格是这样的：

#sbutton {
    text-indent: -99999px;
    border: 0;
    background-image: url('submit.png'); 
    width: 201px;
    height: 37px;
}

它在 Firefox 中的 Opera 中完美运行，按钮大小约为 10x10px，而在 Safari 和 Chrome 中它有某种奇怪的边框（如 iframes 有），我不知道如何摆脱它？

谢谢:)

【问题讨论】：

对于大小问题，请尝试添加display: block。我很确定按钮是内联元素。
给你：tinyurl.com/2ugzj6j 它在 Opera 中运行良好，在 Safari/Chrome O.o 中具有边框。单击时 Firefox 会选择它。我猜输入图像的支持不太好（？）。

【解决方案1】：

可以是大纲吗？设置：

 #sbutton:active,
 #sbutton:focus
 {
  outline: none;
 }

试试看。

【讨论】：

这不是大纲，我猜这是所有输入的默认边框，border: none 和 outline: none 不会改变任何事情 O.o
你有活生生的例子吗？它可能会从级联的更高层继承一些值。屏幕截图也会有所帮助。
我会在几分钟后上传。
给你：tinyurl.com/2ugzj6j 它在 Opera 中运行良好，在 Safari/Chrome O.o 中有边框，点击时 Firefox 会选择它。我猜输入图像的支持不太好（？）。
Got a Polish 404: 404] File Not Found : Plik nie istnieje.

【解决方案2】：

当我在 CSS 中使用背景图像时，将类型从图像更改为提交，这解决了我的问题。

【讨论】：

【解决方案3】：

这是这个问题的正确解决方案：

:active, :focus { outline: none; }

【讨论】：

【解决方案4】：

显然，这发生在没有 src 属性的图像输入上。你可以给它一个 src，就像在这篇文章中一样：

或者，如果您要设置背景图像，您可以只使用 type="submit" 输入而不是 type="image"。

【讨论】：

【解决方案5】：

试试：

border:none;

而不是：

border:0;

【讨论】：