输入 CSS 在 Chrome、Safari 和 Internet Explorer 中显示边框且无文本
我正在使用这个输入
<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 中它是 
我想删除边框并显示文本。
任何建议都会很棒！谢谢
I'm using this input
<input src="img/buttons1.png" name="submit" class="submit1" type="image" value="See Today's Date Deal" tabindex="502" />
and here it's the 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;
}
In Firefox looks great but in Chrome, Safari and Internet Explorer it is
I'd like to remove border and show text.
Any suggestion would be great! Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您已在
上使用了 CSS 背景属性和src属性。src链接无效，因此浏览器显示损坏的图像占位符。这在每个浏览器中看起来都不同，即您看到的边框和小问号。 IE 显示一个小红十字和一个边框。要么使用
并使用 CSS 背景属性，要么使用>请参阅此演示，其中第一个按钮的
src< /code> 属性，并显示占位符以及 CSS 背景图像。而第二个按钮是一个提交按钮，没有 src，只有背景图像的正确 URL。编辑：之前已被问过：如何使用更改输入按钮图像CSS？ 和 input type="image" 在 Chrome 中显示不需要的边框，在 IE7 中显示损坏的链接
You have used both a CSS background property and the
srcattribute on the<input>. Thesrclink is invalid so the browser is displaying the broken image placeholder. This looks different in every browser which is the border and small question mark you are seeing. IE shows a little red cross and a border.Either make it
<input type="submit"/>and use the CSS background property or use<input type="image" src=""/>See this demo where the first button has a broken
srcattribute, and is showing the placeholder as well as the CSS background image. Whereas the second button is a submit button without thesrcand just the correct URL for the background image.Edit: This has been asked before: How to change an input button image using CSS? and input type="image" shows unwanted border in Chrome and broken link in IE7
确保图像文件夹的路径正确。使用
../向上一级目录，使用/向上到主目录。make sure that the path to your images folder is the right one. use
../to go up one directory, and/to go up to the main directory.这是表单上的输入：
这是我的 CSS：
问题也可能是，如果您不告诉它是透明的，浏览器将默认看起来像边框的白色背景。
here's the input on the form:
and here is my CSS:
the issue can also be that if you don't tell it to be transparent, the browser will default a white background which looks like a border.
也许你应该使用 type="button"。代码将是：
CSS 将保持原样。
Maybe you should use type="button". The code would be:
And the CSS would remain as-is.
我也在寻找这个问题的解决方案。
人们可能特别需要一个
，因为这样在一种表单中可以有两个提交按钮。使用背景图像 iso src 属性的原因是 Sprite。 （悬停时背景位置发生变化）。
当你想要这一切时，你仍然必须使用有效的 src 属性，因为至少 Chrome 期望它摆脱输入周围的这条线，它不是边框，也不是轮廓。所以我使用 1 像素透明 gif 作为 src 属性来满足 Chrome。
I was looking for a solution to this problem as well.
One could specifically want an
<input type="image">because one can have two submit buttons in one form that way.The reason to use a background image i.s.o. src attribute is Sprite. (background position shifting on hover).
When you want all this, you still have to use a valid src attribute, since it is expected - by Chrome at least - to get rid of this line around the input, which is not a border, nor an outline. So i use a 1 pixel transparent gif for the src attribute to satisfy Chrome.
您是否尝试过设置 border:0px 而不是 0 ？
Have you tried setting border:0px instead of just 0?