هل يتغير Adblock كيف يقدم Chrome صفحات؟

https://stackoverflow.com/questions/4013582

26-09-2019
|

سؤال

أقوم بتصميم/بناء موقع ، ومثل مطور صغير جيد ، كنت أراقب كيفية عرض الأشياء في جميع المتصفحات الشائعة - الإصدارات الحالية من Firefox و Chrome و Safari (للنوافذ) والكروم والإنترنت Explorer (8 ، وليس المعاينة 9).

على أي حال ، بدا كل شيء على ما يرام في Chrome بالنسبة لي ، لكن صديق لي الذي أعطاني بعض التعليقات أخبرني "أوه ، راجع للشغل ، يقدم موقعك بشكل فظيع في Chrome". أعطيته استجابة "الأعمال على الجهاز" القياسي ، وأجاب أنه يعتقد أنه يجب أن يكون مشكلة تمديد.

أعطاني قائمة قصيرة من الامتدادات الشائعة التي يستخدمها ، وبعد قليل من التجربة والخطأ اكتشفت أن المشكلة تكمن في Adblock. لن أحملك كثيرًا مع تفاصيل مشكلة العرض الفعلية ، لكننا لاحظنا شيئًا غريبًا. لم يكن ذلك أن Adblock كان يحجب شيئًا ما على الصفحة ، لكن مجرد وجود Adblock في Chrome كان يسبب المشكلة. أعرف ذلك لأن المشكلة لا تزال قائمة حتى عندما أوقف Adblock ، و B) عندما أستبعد بشكل خاص تلك الصفحة/الموقع من التعرض.

لقد قمت منذ ذلك الحين بإصلاح المشكلة (لقد لاحظت ذلك في وقت سابق في "متصفح Firefox 3.0" ، لكنني أصلحت الخلل داخل Firebug فقط - لم أطبقها على النسخة الحقيقية حتى الآن) ، لكنها تركتني أتساءل عما إذا كان هناك ما إذا كان هناك هي القضايا الأخرى التي يجب أن أكون على دراية بها.

لا يبدو أنها مسألة وضع المراوغات مقابل وضع المعايير أيضًا. لا يزال document.compatmode يعرض "CSS1COMPAT" (وضع المعايير) ، وعندما أقوم بإزالة تعريف Doctype لتشغيل وضع المراوغات ، لا يزال الموقع يقدم بشكل صحيح (على الرغم من أن بعض الحشوة تغيرت في الأماكن - لا شيء يدعو للقلق).

هل لاحظ أحد هذه المشكلة من قبل؟ هل يغير 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#.
إلغاء تنشيط ، ثم إعادة تنشيط ، float: right; سمة CSS.

سيكون من الجيد تقديم تقرير الأخطاء ، إذا لم يكن موجودًا بالفعل - فهو إما ويب أو خطأ كروم.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow