I design / build a site, and as a good little developer, I follow how things are displayed in all popular browsers - current versions of Firefox, Chrome, Safari (for Windows) and Chrome, and Internet Explorer (8, not a preview )
In any case, everything looked absolutely normal in Chrome for me, but my friend, who gave me some feedback, told me: “Oh, by the way, your site looks awful in Chrome.” I gave him the standard answer “works on my machine” and he replied that he believed that this was an extension problem.
He gave me a short list of the popular extensions that he uses, and after several trial and error, I found that the problem was with AdBlock. I will not bother you too much with the details of the real rendering problem, but we noticed something strange. It's not that AdBlock was blocking something on the page, but the mere presence of AdBlock in Chrome caused a problem. I know this because the problem persists even when: a) I suspend AdBlock and b) when I specifically exclude the page / site from being AdBlocked.
Since then I fixed the problem (I noticed this before in Firefox 3.0 "BrowserShot", but fixed the error only in FireBug - I haven’t applied it to the real copy yet), but it left me wondering if there are any other problems that I should know.
This is not like Quirks vs. Standard Mode. document.compatMode still shows “CSS1Compat” (standards mode), and when I remove the doctype definition to start quirks mode, the site still displays correctly (although with some changes in places that have nothing to worry about).
Has anyone noticed this problem before? Does AdBlock really change the way Chrome pages display, even if it’s inactive on this particular site?
Edit # 1:
It gets weirder. I tried to create an example, but for some reason it will not display correctly. I ended up copying the original (i.e. unsuccessful) html to a new file and throwing the whole CSS file into a tag <style>in the <head>document. It still worked.
, , 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;
}
, :