Html chrome/safari 显示图像周围的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4743127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chrome/safari display border around image
提问by golf_nut
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Chrome 和 Safari 在图像周围显示边框，但我不想要边框。Mozilla 中没有边界。我查看了 CSS 和 HTML，但找不到任何修复它的东西。
Here is the code:
这是代码：
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
CSS：
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
抱歉，我之前复制了一些旧代码。这是给我带来麻烦的代码
Thanks in advance
提前致谢
回答by sarcastyx
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
现在我不知道这是否是 Chrome 的错误，但是当它找不到图像、图像 url 损坏或在您的情况下 src 不存在时，会出现灰色边框。如果你给图像一个正确的 URL 并且浏览器找到它，那么边框就会消失。如果图像没有 src，那么您将需要删除高度和宽度。
回答by Gonzalo
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
sarcastyx 是对的，但如果你想要一个解决方法，你可以将宽度和高度设置为 0，并设置一个填充来为你的图像腾出空间。
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
如果你想要一个 36x36 的图标，你可以设置宽高为 0 和 pading:18px
回答by rapha?λ
I know it is an old question. But another solution is to set the srcto a 1x1transparent pixel
我知道这是一个老问题。但另一种解决方案是将 设置src为1x1透明像素
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
这对我有用。
回答by Andrii Katsiubka
.related_photo {
content: '';
}
回答by Druvision
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
当图像由 css（例如通过http://webcodertools.com/imagetobase64converter）动态植入以避免额外的 HTTP 请求时，可能会发生这种情况。在这种情况下，由于性能问题，我们不想使用默认图像。我已经通过从 img 标签切换到 div 标签解决了这个问题。
回答by Ben
img[src=""]{
content: "";
}
回答by maga
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
回答by thirtydot
Inside img.related_photo, you need to change border: solid thin #DFDFDF;to border: 0.
在里面img.related_photo，您需要更改border: solid thin #DFDFDF;为border: 0.
回答by Sebas Palacio Florez
I have fixed this issue with:
我已经解决了这个问题：
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15pxis where you want the image to be shown, but you can place it where you want.
这right: 15px是您希望图像显示的位置，但您可以将其放置在您想要的位置。
回答by seca400
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop. Worked like a charm no borders
我刚刚添加了 src="trans.png"，trans.png 只是来自 photoshop 的 100x100 透明背景 png。像无国界的魅力一样工作
