在 Chrome 上删除没有 src 的 img 标签上的边框答案

【问题标题】：Remove border on img tag with no src on Chrome在 Chrome 上删除没有 src 的 img 标签上的边框
【发布时间】：2021-03-08 07:50:31
【问题描述】：

我有一个没有 src 内容的 img 标签：

<img class="logo" src="" alt="" />

我无法更改 src 内容，因为它是由我的公司框架自动生成的。

这是我的标志类：

.logo {
    background: url('img/logo.png') no-repeat center center;
    background-size: 70%;
    margin-top: 25px;
    border: 0;
    border-style: none;
}

但在 Chrome 上，我的图像上出现了这个奇怪的边框。我怎样才能删除它？

【问题讨论】：

其他一些 css 类可能正在添加边框。尝试将重要添加到您的边框属性。 border:0!important;
我试过没有成功。这只发生在 Chome
如果可以的话，可以分享一下有logo的网址吗？
对不起，这是在本地环境中
使用 Chrome 开发工具，您可以检查徽标元素的计算值并使用这些值来检查导致边框的原因。

标签： css google-chrome

【解决方案1】：

可能是轮廓或框阴影属性

试试

.logo { 
   outline: none !important;
   box-shadow: none !important
}

【讨论】：

很遗憾，问题依然存在

【解决方案2】：

. logo {
   border: none;
}

或

. logo {
   border-color: transparent;
}

或

.logo {
   border: 0px solid transparent;

【讨论】：

【解决方案3】：

我将这个答案作为 css 解决方案的 Javascript 替代品发布（如果有的话）

您可以定位logo 类img 并以编程方式更改其src。此代码应在徽标添加到 DOM 后运行。

// Fix the img url here according to your real path    
document.getElementsByClassName[0]("logo").src="img/logo.png";

如果页面上有多个标志类，则代码应相应修改。

【讨论】：