火狐浏览器图片加载失败不显示占位符的解决方法

很多web开发人员都喜欢使用火狐浏览器来调式页面,也包括我,当然我也喜欢chrome调css更舒服,firefox调js比chrome舒服(看断点和json界面好一些)。还有各自的控制台信息也有不同,报错的时候可以同时看一下有时候不一定哪个浏览器的错误信息更定位准确一些。

废话说了不少,接下来是重点了,firefox最不爽的一个地方就是图片加载失败不显示占位符这让我们这些做布局的人情何以堪,不明白浏览器的开发人员为什么要这样做,而且还不能设置。
解决办法就是自己定义一个样式文件放到配置目录下面。
1. 新建一个userContent.css。内容如下:

[css]/*
*显示缺失图像占位符
*/
@-moz-document url-prefix(http),url-prefix(file)
{
img:-moz-broken
{
-moz-force-broken-image-icon: 1 !important;
width: 24px;
height: 24px;
}
}[/css]

2.把这个css文件放到你的配置目录下面
xp用户路径地址:C:\Documents and Settings\用户名\Application Data\Mozilla\Firefox\Profiles\不固定字符串.default\chrome
win7用户路径地址: C:\Users\用户名\AppData\Roaming\Mozilla\Firefox\Profiles\不固定字符串.default \chrome

PS:如果你的路径里面没有chrome这个文件夹就自己手动新建一个,我的电脑就没有,最后重启浏览器就OK了。