What Is Quirks Mode

What is quirks mode?

you can read in this links
:

http://en.wikipedia.org/wiki/Quirks_mode

http://www.quirksmode.org/css/quirksmode.html

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Modern browsers generally try to
render HTML content according to the
W3C recommendations. However, to
provide compatibility with older web
pages, and to provide additional
"intuitive" functionality, all
browsers support an alternative
"quirks mode".

Quirks mode is not, however, a
standard. The rendering of any page in
quirks mode in different browsers may
be different. Whenever possible, it is
better to adhere to the W3C standards
and try and avoid depending on any
past or present browser quirks.

Generally, quirks mode is turned on
when there is no correct DOCTYPE
declaration, and turned off when there
is a DOCTYPE definition. However,
invalid HTML - with respect to the
chosen DOCTYPE - can also cause the
browser to switch to quirks mode.

More information on the different
quirks modes in different browsers can
be found at QuirksMode.org

Doctype and Quirk modes and HTML 5

No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.

Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.

However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.

You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.

Simply add the following to the top of your CSS code:

* {box-sizing:border-box;}

This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.

This should sort out most (if not all) of the layout issues you've been having.

Hope that helps.

What is Quirks Mode in IE? When and Why we use Quirks Mode in internet explorer?

"Quirks Mode" means the browser tries to work in compatibility mode with older browser versions. Quirks mode kicks in if browser detects the site was coded/optimized for earlier versions of the browser.

You wrote you googled it and possibly hit this article, but in case you didn't:
http://en.wikipedia.org/wiki/Quirks_mode

"(...)a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers(...)"

If you want a test, try this little guy (works both in Firefox and Internet Explorer -9-) here:

<HTML>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
</HEAD>
<BODY>
<script>
window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')
</script>
</BODY>
</HTML>

Copy-paste the code above in a blank text file, save & rename it to [anything].html, then drag&drop to your browser. It'll display a message box telling you the browser is in quirks mode.
If you remove the meta tag, save the file & refresh browser page you'll see the browser switched back to standard mode.

There can be many reasons something says an HTML is broken but in your case, one good reason could be you force compatibility to old browser version(s) but use technology in your code that was invented later.
E.g. using "canvas" element (HTML5) and forcing IE6 compatibility (which is an old browser and doesn't understand HTML5 elements).

How to tell if a browser is in quirks mode?

In Firefox and Opera you can determine if your browser is in "quirks mode" by checking page info.

Using document.compatMode, will tell you the mode you are in with most browsers.

In Chrome, Safari, and IE, run this javascript in the address bar:

 javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

(note that you'll need to re-type the javascript: portion after pasting into your address bar, due to recent security changes)

Html inside html etc causes quirks mode to kick in?

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.

Page lacks the HTML doctype, thus triggering quirks mode

You have a Doctype, but the key is in the phrase "The HTML Doctype" which is <!DOCTYPE html>.

You are using the Doctype for XHTML 1.0 Transitional, which is a legacy language. That Doctype triggers Almost Standards Mode instead of Standards Mode in a number of browsers where <!DOCTYPE html> would trigger Standards Mode.

See the Wikipedia article on Quirks mode for more details.

An aside: While you have declared that Doctype, I see a data-* attribute in your screenshot so you aren't following it. Use a validator.