#css #google-chrome #background-image #google-chrome-devtools
#css #google-chrome #background-image #google-chrome-devtools
Вопрос:
Я использую .css() метод jQuery для установки фонового изображения a div . Таким образом, HTML в его конечном состоянии:
<div id="front-page-bg" style="background-image: url(http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg); display: block; "></div>
Это работает нормально, однако я получаю сообщение об ошибке / предупреждение в Chrome, где background-image свойство отображается так, как будто оно игнорируется из-за неправильного ввода, хотя оно, очевидно, применяется. Почему это должно быть? Это проблема с Chrome или с моей стороны?
Я протестировал страницу в FF и IE, где она также работает без каких-либо ошибок или подобных предупреждений. Любые идеи о том, почему это может происходить, и, возможно, что более важно, должен ли я игнорировать это, поскольку страница, похоже, работает?
Комментарии:
1. Предоставляет ли Chrome вам информацию о предупреждении?
2. «Предупреждение» как таковое не отображается в консоли, нет.
3. Попробуйте заключить адрес изображения в кавычки или апострофы, подобные этому: url(‘ google.com/intl/en_com/images/srpr/logo3w.png ‘ ).
4. Есть ли какие-либо другие свойства фона, применяемые вами
#front-page-bgиз любых других скриптов или таблиц стилей? Это может указывать на конфликт, а не на неправильный ввод.5. @firian — Хотя все должны заключать URL-адреса в кавычки (это правильная практика), Chrome по-прежнему показывает такой код без кавычек.
Ответ №1:
Редактировать:
При более глубоком изучении (игнорируя первую вводящую в заблуждение проблему 404 с изображением) кажется, что инструменты разработчика игнорируют определение стиля; фактически он применяет not-parsed-ok класс, который добавляет значок предупреждения, и overloaded класс, который вызывает сквозную строку. Перегруженный класс не добавляется при использовании background вместо определения background-image css.
Но для выявления причин такого поведения необходимо проанализировать исходный код инструментов разработчика.
Я предполагаю, что это ошибка / неполная функция инструментов разработчика.
Это мой собственный тест:
как вы можете видеть, используемое изображение является локальным и имеет apix. И это результирующая проверка:
Тестирование с несуществующим свойством css показывает идентичное поведение:
У вашего ссылочного изображения есть некоторые странные проблемы с веб-сервером: фактически он возвращает ошибку 404 (возможно, тайм-аут?), Затем перенаправление.
Поэтому вы должны проверять изображение и путь к веб-серверу, а не ваш фактический html-код.
Даже при попытке ввести фактический html-код ошибка остается той же:
Это фактический ответ вашего веб-сервера, а не вашего изображения:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
Комментарии:
1. проблема с веб-сервером отсутствует, проверьте этот пример jsfiddle.net/sandeep/RDmRz/2/show вы по-прежнему получаете предупреждение в Chrome и webkit
2. Это не ошибка инструмента разработчика, это предупреждение, поскольку chrome и safari выдают предупреждения при попытке использовать устаревшие функции.
3. Итак, почему это не объясняется в консоли, как это происходит с другими предупреждениями? И почему не добавляет более удобный «устаревший» класс к своим стилям? И почему он добавляет сквозную строку, поскольку она перегружена, даже если нет?
4. предупреждение не означает, что это неправильное свойство. Это означает, что это не очень хорошее или не рекомендуемое значение. Вот почему он показывает изображение без каких-либо проблем в Chrome, firefox, safari и т. Д..
5. Мы не обсуждаем, является ли свойство правильным или неправильным, но «предупреждение» не содержит указаний, позволяющих пользователю понять причину его присутствия; так что, если это не ошибка, это, по крайней мере, неполный функционал. И в любом случае перебор строк не оправдан.
Ответ №2:
Проблема заключается в ошибке DevTools / WebInspector. Код пользовательского интерфейса DevTools просто показывает данные, не всегда корректно сгенерированные серверной частью DevTools.
Ошибка WebKit: https://bugs .webkit.org/show_bug.cgi?id=70325
Ошибка Chromium: http://code.google.com/p/chromium/issues/detail?id=100646
Комментарии:
1. Как я и думал, это ошибка.
2. Ошибка была исправлена 2 недели назад. trac.webkit.org/changeset/98714 Chrome ‘17.0.932.0 dev’ работает нормально.
Ответ №3:
@IsaacLubow; Оба Chrome amp; Safari инструмента разработчика показывают эту warning ошибку. Тогда вопрос
Почему они показывают предупреждение?
Ответ: — Оба Chrome amp; Safari developer tool показывают предупреждение, когда свойство не understand amp; recognized принадлежит им.
например:- запись -moz-border-radius в css. Затем проверьте страницу в Chrome или safari. Он показывает ту же ошибку, что и у вас.
Тогда возникает второй вопрос
Но свойство background-image распознается всеми браузерами!
Ответ: — Да; background-image свойство распознается всеми браузерами, и изображение по-прежнему отображается на веб-сайте, но причиной этого является то, как мы определяем изображение warning / error . В вашем примере, если вы определяете background-image свойство внутри html tag вместо css . Он показывает warning / error .
Проверьте этот пример, первые изображения div показывают warning , но второй div не показывает никакого предупреждения:
http://jsfiddle.net/sandeep/RDmRz/3/show
Итак; почему это происходит?
Поскольку присвоение атрибутов в html теге является Deprecated методом, означает
Эти устаревшие функции все еще можно использовать, но их следует использовать с осторожностью, поскольку ожидается, что в будущем они будут полностью удалены. Вам следует поработать над тем, чтобы убрать их использование из вашего кода.
Проверьте, что mozilla сказано об этом https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features
https://developer.mozilla.org/en/DOM/HTMLImageElement
Итак; Developer tool обновляются в соответствии с новым html standards amp; после введения HTML4 некоторых устаревших и устаревших свойств.
Проверьте это для получения дополнительной информации http://fantasai.tripod.com/qref/HTML4/deprecated.html
http://www.createafreewebsite.net/html_tutorial/body_tag.html .
Хорошо писать background-image css вместо html тега.
Комментарии:
1. Ваш ответ по теме. Он пытается установить фон элемента <div …></div>, а не тела.
2. @MerianosNikos; но причина в том же, что и фоновое изображение в html-тегах. Теперь проверьте мой обновленный ответ
3. Какое отношение к CSS имеет устаревший атрибут HTML (который даже не существует
html, он существует только дляbody)?4. Я думаю, что Сандип прав, пожалуйста, проверьте прикрепленный им jsfiddle. Я проверил это, и, похоже, он прав.
5. сандип, я думаю, ты ошибаешься; в твоем ответе делаются предположения , о которых ты догадываешься : фактически ни в одном опубликованном вами URL-адресе не указано, что встроенный стиль background-image устарел : они сообщают об устаревших тегах html, а не таблицах стилей: на самом деле в вашем последнем URL-адресе предлагается background-imageкак замена, а не как устаревшая! Элемент Background-image в таблице стилей не является устаревшим; если мы должны сказать, что что-то устарело, это вообще встроенная таблица стилей; но это не объясняет, почему другие свойства css не подписаны, как вы предположили.
Ответ №4:
http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg
Ваше изображение не отображается, вместо этого мы получаем ошибку 404. Я заметил, что вы используете сайт WordPress, исходя из структуры вашего URL-адреса изображения, возможно, мы смотрим не на ваше изображение, а на изображение, включенное в ваш 404.php страница внутри вашей темы.
Возвращаемый HTML-код выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
И вместо этого загружается изображение: http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png
Я совершенно уверен, что если вы проверите свой 404.php страница из вашей темы — вот что вы найдете. Поэтому вы можете повторно загрузить изображение и использовать новый URL.
Комментарий
Я знаю, что на вопрос был дан ответ, но хотел поделиться своими результатами относительно того, что я нашел. Я заметил, что по какой-то причине, когда вы указываете a background-image для элемента, он иногда выдает предупреждение в браузере webkit, что является проблемой, с которой столкнулся OP. Но я заметил, что предупреждение исчезает, когда background вместо него используется сокращение.
Вот так:
background:#ffffff url('image.png') repeat scroll right top;
Я изменил демонстрацию @sandeep, чтобы показать, как это работает:
Вот полная скрипка: http://jsfiddle.net/RDmRz/7 /
И демонстрационная страница: http://jsfiddle.net/RDmRz/7/show /
Проверьте страницу с помощью инструментов разработчика и переключайтесь между разделами, чтобы показать, как это работает для «рабочих» изображений и не работает для других.
Пара скриншотов:
Работает
Не работает
Комментарии:
1. При обращении к сайтам WordPress случайные ошибки 404 недостаточно конкретны. Сайты WordPress могут использовать пользовательские файлы шаблонов ошибок 404, которые появляются в любое время, когда возникает ошибка, на которую вы не ссылались.
2. URL-адрес изображения правильный (только что проверено). На самом деле проблема заключается в браузерах webkit. Просто замените свойство js / jquery css на правильный URL в самом файле css. Вы заметите, что ошибки нет. Разница на самом деле заключается в том, что использование javascript / jquery помещает стиль как встроенный код в файл XHTML, в который webkit выдает ошибку.
3. проверьте этот пример jsfiddle.net/sandeep/RDmRz/3/show проблем с изображением нет, но оно по-прежнему показывает предупреждение.
4. Да, но если бы вы лучше прочитали ответ и вопрос, проблема не в 404, как это происходит с любым изображением, даже без 404.
5. @user903598 Нет, в изображении также есть ошибки в firefox, о них просто не сообщается, если вы проверите заголовок изображения с помощью firebug, и вы увидите, что он выдает ошибку «404 не найдено». Сандип, та же проблема, вы не видите ссылочное изображение, которое peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg и вместо этого вы видите peterfcarlson.com/wp-content/themes/comingsoon/pfc.png «от» самого 404.php пейдж, я совершенно уверен.