Html – Page stuck in Quirks Mode

doctypehtmlinternet-explorer-9quirks-mode

Currently the page I am working displays fine in Chrome and Firefox, but in IE9 it is rendering in Quirks mode.

Looking into the issue further, it seems that

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"

is always getting commented out. Causing Quirks mode to stay in place as no doctype is specified. Basically, I am trying to force the page to render in normal IE9 and not quirks mode. However, something is causing the comment out. Regretfully, this is a wordpress theme that's why I am having a hard time fixing the issue as I didn't write the original code.

Anyone have suggestions?

Thank you!

Best Answer

I don't know what you mean by "[the doctype] is always getting commented out".

There are many different things that can cause Quirks Mode, see here.

Another common cause is having stuff before the doctype. Even invisible stuff.

You can fix this without debugging the actual problem if you add this in your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Related Solutions

Javascript – How to modify the URL without reloading the page

This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!

See this question's answer for more information: Updating address bar with new URL without hash or reloading the page

Example:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

For a more in-depth look at manipulating browser history, see this MDN article.

Javascript – Why doesn’t this drop down menu work in IE

IE7 has problems with auto margins. Just change the hover margin from left: auto to left: 0px and it should work.

Best Answer

Related Solutions

Javascript – How to modify the URL without reloading the page

Javascript – Why doesn’t this drop down menu work in IE

Related Topic