【问题标题】:hide img tag if src is empty but without javascript/jQuery or css3如果 src 为空但没有 javascript/jQuery 或 css3,则隐藏 img 标签
【发布时间】:2013-09-24 01:36:59
【问题描述】:

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

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

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

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

<img src=""/> 

这显示了一个损坏的图像。

有没有办法在 IE7+ 中使用 HTML 或 CSS 隐藏 &lt;img src=""/&gt;

【问题讨论】:

    标签: html css image css-selectors


    【解决方案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;之间的区别

    Demovisibility: hidden;,预留空间)

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


    注意:以上选择器都不会从 DOM,它只会在前端隐藏它

    【讨论】:

    • 对于 SEO 问题,将 src 留空并不好,这就是我个人使用 # 作为 src 的原因。全局搜索引擎友好选择器将是 img[src=""], img[src="#"], img:not([src])
    【解决方案2】:

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

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

    【讨论】:

      猜你喜欢
      • 2023-03-15
      • 1970-01-01
      • 2013-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-21
      • 1970-01-01
      相关资源
      最近更新 更多