Defaulting to Quirks Mode

mazecreative commented 11 years ago

I've created a theme for a client based on Reverie and it's defaulting to Quirks Mode for me in IE9. I've tried every solution I've found but to no avail. I've tried the following:

Ensuring there are no spaces before DOCTYPE declaration
Keeping the DOCTYPE <!DOCTYPE html>
adding '' in the head to force it to render

But the page still loads up in Quirks Mode by default and I can only change it manually.

http://dev.mazecreative.co.uk/srb/

Thanks

mazecreative commented 11 years ago

Looking at Dev Tools for IE I can see that the DOCTYPE is getting commented out, which would suggest that there is text preceding it but I can't see any.

mazecreative commented 11 years ago

OK, I've fixed it by adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> directly under the head tag, and moving the conditional IE statements below all of the meta tags like so:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="<?php bloginfo('charset'); ?>">

    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>

    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width" />

    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

jamesvl commented 11 years ago

The original Foundation .htaccess file has comments which address this issue - basically, the paulirish conditional comments in the header will cause Quirks mode to activate.

If you want to keep the conditional CSS classes, but still disable quirks mode, you need to set have Apache (or whatever your web server is) send the X-UA-Compatible header.

Setting X-UA-Compatible in the HTML header won't work - the conditional comments (not being standard) take precedence.

milohuang / reverie

Defaulting to Quirks Mode #183