使用javascript删除图像边框答案

【问题标题】：Remove image border using javascript使用javascript删除图像边框
【发布时间】：2014-02-19 01:22:30
【问题描述】：

我有一个带有边框的图像，不应该在 Chrome、Safari、IE 和 Opera 中，但在 Firefox 中不应该。我假设它是浏览器默认问题，但我正在努力解决如何删除它，因为它正在作为 AB 拆分测试运行，我无法修改基本 html/css 来运行测试。我需要使用 javaScript/jQuery 来做到这一点。

我需要删除的边框在“选定”图像周围。

这是我尝试过的：

$('.selectImg').css({
    position:'absolute',
    top:'112px',
    left:'5px',
    height:'26px',
    width:'90px',
    border: 'none',
    borderStyle:'none',
    backgroundImage: "url('http://www.annsbridalbargains.com/assets/ann/images/global/selectedOption.jpg')"
});

这是小提琴： http://jsfiddle.net/2rULC/8/

我需要为 IE、Chrome 和 Safari 删除它。如有必要，可以忽略 Opera。它的外观和功能与 Firefox 中应有的一样。

【问题讨论】：

奇怪的小边框：/
我同意。真奇怪。我最初认为它是图像本身的一部分，但当它在一个浏览器上完美呈现时，就被排除了。
见stackoverflow.com/questions/4743127/…。这是一个小提琴，显示了填充黑客工作jsfiddle.net/j08691/2rULC/15。很奇怪。
它并不完美，但它可以用于测试！

标签： javascript jquery html css google-chrome

【解决方案1】：

我不确定为什么Webkit浏览器上会出现边框，但似乎当图像没有src属性时，会出现灰色边框。

我已经通过设置src 属性而不是使用background 来解决这个问题：

$('.selectImg').css({
    position:'absolute',
    top:'112px',
    left:'5px',
    height:'26px',
    width:'90px',
    border: 'none'
}).attr('src', 'http://www.annsbridalbargains.com/assets/ann/images/global/selectedOption.jpg');

WORKING DEMO。

【讨论】：

【解决方案2】：

问题是您没有图像的 src，因此它“损坏”，没有 alt 标签，因此浏览器为丢失的图像添加的占位符区域中没有文本出现。

解决办法是

使用图片标签 src 而不是在 CSS 中设置

或

使用 span/div 而不是 img。

【讨论】：