Изменяет ли AdBlock способ отображения страниц в Chrome?

https://stackoverflow.com/questions/4013582

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.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow