My element or background isn't displaying in Chrome but displays in all other browsers, why?

Question

I have an element or image which isn't displaying properly in Chrome, but it displays as it should in all other browsers. What is causing this?

---

Note: Due to their nature, these questions are often too localized to be marked as duplicates. I've added this question as a way of targeting all of these questions purely for this reason.

A couple of examples of such questions asked in the last week alone are:

Chrome don't want to display CSS block

Background image not displaying in chrome browser

Answer 1

This is a question which frequently pops here on StackOverflow.

The "problem" here is often AdBlock; a Chrome extension which filters out potentially unwanted adverts from a page. If your element has a property which is detected by AdBlock (long list) it will silently have its display set to none.

Detected class example:

<div class="ad_box">
    <!-- Anything within this divider will not be displayed -->
</div>

Detected image src example:

<img src="../300x250/1_512648b566578.png" alt="This doesn't display either!" />

(This applies to CSS background images as well!)

How can I prevent this from happening in order to test it on my website?

There are a several ways to fix this problem, but the easiest methods would be:

1. Pause the extension, or prevent it from running on that specific page or your domain by left clicking on the icon in the top right corner (default position) of your screen and selecting the required option:
   
   
   

2. Alternatively you could disable the extension by navigating to chrome://extensions/ (in your URL bar) and unchecking "Enable":
   
   

---

Update

A couple of months ago the AdBlock extension was updated to display how many ads have been blocked on a page within the extension's icon. Provided the icon is set to visible, you can now easily see how many different content sections have been blocked by the extension: