输入CSS，在Chrome，Safari和Internet Explorer中显示边框，没有文字

Question

我正在使用此输入

<input src="img/buttons1.png" name="submit" class="submit1" type="image" value="See Today's Date Deal" tabindex="502" />

这里是css

.submit1 {
              display: block;
              width: 250px;
              height: 28px;
              background: url(img/buttons1.png) no-repeat 0 0;
              padding-top: 12px;
              text-align: center;
              font-size: 17px !important;
              color:#fff; 
              border:0;
              outline:none;
}

在Firefox中看起来不错，但在Chrome，Safari和Internet Explorer中它是
我想删除边框和显示文字。

任何建议都会很棒！感谢

Answer 1

您在src上使用了CSS背景属性和<input>属性。 src链接无效，因此浏览器正在显示损坏的图像占位符。这在每个浏览器中看起来都不同，这是您看到的边框和小问号。 IE显示一个小红十字和边框。

使其成为<input type="submit"/>并使用CSS背景属性或使用<input type="image" src=""/>

请参阅 this demo ，其中第一个按钮的src属性已损坏，并且正在显示占位符以及CSS背景图像。而第二个按钮是没有src的提交按钮，只有正确的背景图片网址。

修改：之前已经询问过：How to change an input button image using CSS?和input type="image" shows unwanted border in Chrome and broken link in IE7

Answer 2

确保图像文件夹的路径是正确的。使用../上一个目录，/上一个目录。

Answer 3

这是表格上的输入：

<input type="submit" id="submit" class="submit-btn" style="margin-top:5px" border="0" value="&nbsp;">

这是我的CSS：

.submit-btn {
    background: url("images/submit.png") no-repeat 0 0 transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}
.submit-btn:hover {
background: url("images/submit.png") no-repeat 0 -35px transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}

问题也可能是，如果你不告诉它是透明的，浏览器将默认一个看起来像边框的白色背景。

Answer 4

也许你应该使用type =“button”。代码是：

<input name="submit" class="submit1" type="button" value="See Today's Date Deal" tabindex="502" />

CSS将保持原样。

Answer 5

我也在寻找这个问题的解决方案。

人们可能特别想要一个<input type="image">因为一个表单可以有两个提交按钮。 使用背景图片i.s.o.的原因。 src属性是Sprite。 （悬停时背景位置移动）。

如果你想要所有这些，你仍然需要使用一个有效的src属性，因为至少Chrome是预期的 - 摆脱输入周围的这条线，这不是边框，也不是轮廓。所以我使用1像素透明gif作为src属性来满足Chrome。

Answer 6

您是否尝试过设置border：0px而不是0？