如果src为空但没有javascript/jQuery或css3,则隐藏img标签

Question

我正在为eBay商店的Channel Advisor设计模板,但它不允许javascript/jQuery.此外,CSS3在各种IE版本中不起作用,特别是img[src=]实现被破坏.

当我在img中使用模板标签时:

<img src="{{THUMB(ITEMIMAGEURL1)}}"/> 

其中{{THUMB(ITEMIMAGEURL1)}}是图像路径,如果图像丢失并且模板被发布到eBay,那么最终结果将是这样的:

<img src=""/> 

这显示了一个破碎的图像.

有没有办法隐藏<img src=""/>在IE7 +中工作的HTML或CSS

Answer 1

你可以使用[attr=val]选择器

img[src=""] {
   display: none;
}

如果src属性没有值,则上述选择器将简单匹配.这个选择器是一般的选择器,如果你想要定位特定的选择器,它将匹配img文档中的所有标签src,而不是使用更具体的选择器

.class_name img[src=""] {
    display: none;
}

Demo

Demo (没有上面的选择器,看到那条红线？)

另外,如果你想保留采取的空间img标签,你可能会喜欢使用visibility: hidden;,而不是display: none;作为display: none;只会惹你的布局,其中visibility: hidden;将预留的空间,它只是隐藏img

见之间的差别display: none;和visibility: hidden;

Demo(visibility: hidden;,预留空间)

Demo 2(display: none;,不会预留空间)

注意:以上选择器都不会img从DOM中删除标签,只会将其隐藏在前端

Answer 2

[attr=value] 选择器是CSS2,你应该没问题.

img[src=""] {
  display:none;
}