We are redesigning our Cold Fusion website and decided to use more modern design elements such as HTML 5 along with a responsive design for our users with more up to date browsers. Now the problem is IE 7 & 8 has this dumb thing called compatibility mode. As IE looks at the webpage and it does not recognize doctypes and other things that are not compatible then it gets pushed down and the webpage is then displayed in the lower IE versions. Of course, older versions of IE does not understand HTML5 so if a user has compatibly mode enabled, it will break our new beautiful responsive website. Another thing in IE, is that if the website is considered an intranet site, it will automatically enable compatibly view. Working in an academic setting, our website is viewed on campus gets pushed to an intranet site. Off campus, it is not an intranet site. So as you can see our dilemma. But wait, there is a fix. There is a line of code that must be placed in the head of your webpage that will disable compatibly view and force IE to render the webpage in whatever IE version you are using. EXCELLENT! Here is that magic line of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
There are many articles out there explaining this line of code so I will not go into details. So our problems are solved, now whenever someone views our website using IE 7 or 8, IE will stay in IE 7 or 8.
There are a couple of different ways to fix this. One, DON”T USE the cfform tag. Use, regular html form tags. So for our main searchbox on our home page, I had to convert our cfform to normal html form tag. But that only solved our header section. Since this form sits in our header file and all of the rest of our hundred of pages call that same header file, then most pages are fixed. NOT SO FAST! This solved most of our pages except our Forms section.
We hard-coded these two lines on each form page
< !doctype html> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
before we call our main header file. Of course this is not very good coding in terms of semantics and validation, but we need the forms to work in all browsers and having to support older versions of IE, sometimes there is not much you can do. So now all of our Form pages use the cfform tag and all display perfectly in IE 7 &8.
To wrap this up, I am writing this post to hopefully have this land into the hands of some CF Developer and will hopefully save them many hours of debugging research. This might not be the only way to fix this issue but this is what we did to solve our issues.