我想给损坏/错误的图像添加一些额外的CSS:
img:error { max-width: 20px; max-height: 20px; }
但这不起作用.有没有办法用纯CSS来做到这一点?这有一个img伪选择器吗?甚至更好:一个有效的肮脏黑客?
我环顾四周,但似乎没有人想知道=)
(是的,我知道JS可以做到,我知道如何;不需要提及它.)
解决方法
在CSS规范或草稿中没有办法,但Firefox有一个专有的选择器(伪类)
:-moz-broken
.它的文档非常简洁,它说“主要供主题开发人员使用”,但它可以用于例如如下:
:-moz-broken { outline: solid red } :-moz-broken:after { content: " (broken image)" }
尽管文档说它“匹配表示断开图像链接的元素”,但它实际上匹配了断开的图像(src属性不引用图像的img元素),无论它们是否是链接.据推测,“链接”在这里真的意味着“引用”.
CSS 2.1说:“此规范没有完全定义:替换元素之前和之后的交互(例如HTML中的IMG).这将在未来的规范中更详细地定义.“但是Selectors Level 3(CSS3选择器)只是对它们说:”它们在CSS 2.1中进行了解释.“在实践中,浏览器以不同的方式处理它们.奇怪的是,Firefox支持:-moz-broken:after但忽略:-moz-broken:之前.它不支持普通图像的这些伪元素中的任何一个,但是img:after也支持损坏的图像(即,指定的内容出现在alt属性值之后).