Изменяет ли AdBlock способ отображения страниц в Chrome?
-
26-09-2019 - |
Вопрос
Я проектирую/создаю сайт и, как хороший маленький разработчик, слежу за тем, как все отображается во всех популярных браузерах — текущих версиях Firefox, Chrome, Safari (для Windows) и Chrome, а также в Интернете. Проводник (8, а не превью 9).
Во всяком случае, в Chrome все выглядело абсолютно нормально, но мой друг, который давал мне отзывы, сказал мне: «О, кстати, ваш сайт ужасно отображается в Chrome». Я дал ему стандартный ответ «работает на моей машине», и он ответил, что, по его мнению, это, должно быть, проблема с расширением.
Он дал мне краткий список популярных расширений, которые он использует, и после небольшого количества проб и ошибок я обнаружил, что проблема связана с AdBlock.Не буду утомлять вас подробностями реальной проблемы рендеринга, но мы заметили кое-что странное.Дело не в том, что AdBlock что-то блокировал на странице, а в том, что проблему вызывало само наличие AdBlock в Chrome.Я знаю это, потому что проблема сохраняется, даже когда а) я приостанавливаю блокировку AdBlock и б) когда я специально исключаю эту страницу/сайт из блокировки AdBlock.
С тех пор я исправил проблему (я заметил ее ранее в Firefox 3.0 "BrowserShot", но исправил ошибку только внутри FireBug - я еще не применил ее к реальной копии), но это заставило меня задуматься, есть ли там есть и другие проблемы, о которых мне следует знать.
Кажется, дело не в Quirks vs.Стандартный режим тоже.document.compatMode по-прежнему отображает «CSS1Compat» (стандартный режим), и когда я удаляю определение типа документа, чтобы активировать режим совместимости, сайт по-прежнему отображается правильно (хотя местами изменены некоторые отступы — не о чем беспокоиться).
Кто-нибудь замечал эту проблему раньше?Изменяет ли AdBlock фундаментально способ отображения страниц в Chrome, даже если он не активен на этом конкретном сайте?
Редактировать №1:
Это становится еще страннее.Я попытался создать пример, но по какой-то причине он не отображался неправильно.В конечном итоге я скопировал оригинал (т.неудачно) html в новый файл и выбросил весь CSS-файл в <style>
тег в <head>
документа.Это все еще работал.
Немного проб и ошибок, и я определил, что проблема существует только при включении CSS через <link rel="stylesheet">
но нет с помощью <style>
.
Может ли кто-нибудь пожалуйста объясни, что здесь происходит?
Редактировать № 2:
Вот код, с которым я работаю:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer">
<img src="placeholder.png" width="150px" height="150px" />
<div id="inner">
<h1>Test</h1>
<p>Lorem ipsum blah blah blah</p>
</div>
</div>
</body>
</html>
CSS:
#outer {
border: 1px solid #000;
width: 700px;
}
#inner {
float: right;
width: 540px;
}
Если вы хотите попробовать это сами, я разместил несколько файлов на своем сервере:
Решение
Кажется, проблема в том, как Chrome перекомпоновывает содержимое после изменения CSS — вы можете воспроизвести точно такой же рендеринг, выполнив следующие действия:
- Отключите Adthwart, перезагрузите хром.
- Загрузите страницу (любую из двух).
- Зайдите в инспектор Chrome и выберите элемент div#inner.
- Деактивируйте, а затем снова активируйте
float: right;
CSS-атрибут.
Было бы неплохо отправить отчет об ошибке, если он еще не существует — это ошибка либо WebKit, либо Chrome.