输入 CSS 在 Chrome、Safari 和 Internet Explorer 中显示边框并且没有文本答案

【问题标题】：Input CSS showing border in Chrome, Safari and Internet Explorer and no text输入 CSS 在 Chrome、Safari 和 Internet Explorer 中显示边框并且没有文本
【发布时间】：2011-08-01 15:47:17
【问题描述】：

我正在使用这个输入

<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 中它是
我想移除边框并显示文字。

任何建议都会很棒！谢谢

【问题讨论】：

标签： css image button input border

【解决方案1】：

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

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

CSS 将保持原样。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

0px 和 0 是一样的。也没有区别，因为它是损坏的 URL。

【解决方案4】：

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

要么设为<input type="submit"/> 并使用CSS 背景属性，要么使用<input type="image" src=""/>

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

编辑：之前有人问过这个问题：How to change an input button image using CSS? 和 input type="image" shows unwanted border in Chrome and broken link in IE7

【讨论】：

【解决方案5】：

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

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

当你想要这一切时，你仍然必须使用一个有效的 src 属性，因为至少 Chrome 期望摆脱输入周围的这条线，它不是边框，也不是轮廓。所以我为 src 属性使用了一个 1 像素的透明 gif 来满足 Chrome。

【讨论】：

【解决方案6】：

这是表单上的输入：

<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;
}

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

【讨论】：