CSS-在Chrome / IE9中删除图片边框
我试图摆脱在Chrome和IE9中为每张图片显示的细边框。我有这个CSS：
outline: none;
border: none;
使用jQuery，我还在每个图像标签上添加了
Dashboard
属性。 但是仍然出现图像中所示的边框。 有什么办法吗？Dashboard
Dashboard
请参阅所附的屏幕截图：
18个解决方案
53 votes
这是一个Chrome错误，忽略了“ border：none;”。 样式。
假设您有一个尺寸为102x86像素的图片“ download-button-102x86.png”。 在大多数浏览器中，您会保留该大小的宽度和高度，但是无论您做什么，Chrome只会在其中绘制边框。
因此，您欺骗Chrome认为那里什么也没有-大小为0px x 0px，但是“按钮”的数量恰到好处。 这是我用来完成此操作的CSS id块...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
瞧！ 适用于任何地方，并摆脱了Chrome中的轮廓/边框。
Randy King answered 2020-01-15T16:37:52Z
51 votes
您应该在CSS中代替27039588949379000900032或27039588949379000900033：
border-style: none;
您也可以像这样将其放在图片标签中：
除非图像没有270395889493790009000，否则任何一种方法都将起作用。上面的内容适用于那些讨厌在边界无法很好播放的浏览器中显示的链接边界。 当没有27039588949379000900033时出现的细边框是因为chrome显示实际上您定义的空间中没有图像。 如果遇到此问题，请尝试以下方法之一：
使用27039588949379000900032代替270395889493790009000元素(无论如何，有效地创建带有背景图像的元素是您真正要做的，实际上并没有使用标签)
如果要/需要270395889493790009000标签，请使用以下Randy King的解决方案
定义图像src
Zach answered 2020-01-15T16:37:17Z
18 votes
对于想在src为空或没有src时摆脱边框的任何人，请使用以下样式：
IMG[src=''], IMG:not([src]) {opacity:0;}
它将完全隐藏IMG标签，直到您添加src
John answered 2020-01-15T16:38:17Z
6 votes
在img标签中添加属性border =“ 0”
Amareswar answered 2020-01-15T16:38:36Z
4 votes
如果您未定义src或img标签中src属性为空，则大多数浏览器都会创建边框。 要解决此问题，请使用透明图像作为src：
code19 answered 2020-01-15T16:38:57Z
3 votes
如果您尝试修复加载图像时的Chrome错误，但还希望加载占位符图像(例如，使用“延迟加载”图像)，则可以使用此技巧：
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
这将使边框隐藏在容器的溢出区中，您将看不到它。
转这个：
变成这个：
aaron-coding answered 2020-01-15T16:39:31Z
2 votes
我喜欢Randy King的解决方案，因为chrome忽略了“ border：none”样式，但是它有点复杂，并且在ie6和更旧的浏览器中不起作用。 以他为例，您可以这样做：
CSS：
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
确保在使用ins标记时以“”将其关闭，否则格式看起来会很时髦。
sksallaj answered 2020-01-15T16:40:04Z
1 votes
在您的img src标签中，添加一个border =“ 0”，例如
，如上文@Amareswar所述
doodoodukes answered 2020-01-15T16:40:24Z
1 votes
使用border =“ 0”是一种有效的方法，但是您需要为每个图像添加此属性。
我使用以下jQuery为每个图像添加此属性，因为我讨厌图像的轮廓和边框。
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
OldTrain answered 2020-01-15T16:40:48Z
1 votes
内联CSS
answered 2020-01-15T16:41:09Z
1 votes
您可以通过将text-indent设置为很大的数字来删除边框，但是图像的高度也消失了。尝试这个
img:not([src]) {
text-indent: 99999px !important;
}
Hoang Trung answered 2020-01-15T16:41:29Z
0 votes
在div标签中显示.png图像时，我遇到了类似的问题。 在图像的侧面绘制了一条细线(我认为是1 px)。 要解决此问题，我必须添加以下CSS样式：box-shadow: none;
Zerato answered 2020-01-15T16:41:49Z
0 votes
与@ aaron-coding和@ randy-king相同-但只是更通用的一种在图像加载之前隐藏图像边框(即使用lazy-load.js或其他东西)
(显然，我无法在原始注释中执行代码块)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
rwcorbett answered 2020-01-15T16:42:14Z
0 votes
我使用填充样式修复它：
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
当您增加填充值时，边框消失了。 找到自己的价值。
Alexandr answered 2020-01-15T16:42:38Z
0 votes
它为我工作。 花了好几天使我发疯。
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
vahid sabet answered 2020-01-15T16:42:58Z
0 votes
解决方案是将大纲样式设置为无(即大纲)：无，与我一起使用
Farid answered 2020-01-15T16:43:21Z
0 votes
首先使用小型尺寸的Photoshop创建透明的图像类型PNG。然后在您的课程中添加：
content:url("url of your blank png");
MohammadAmin Kariminasab answered 2020-01-15T16:43:42Z
-1 votes
发生这种情况是因为您正在使用没有src属性的img标签。 解决方案是将图像放入div。 像这样：
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
Alejandro Liébana answered 2020-01-15T16:44:02Z
1391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
