How to Use Responsive Web Design to Support Old Browsers

Learn how to make your responsive design to work on older browsers

In this tutorial, Craig Buckler is going to create a simple web page which works in all modern browsers as well as IE8, IE7, IE6 and possibly earlier versions. Before he starts, please note that he is not aiming for pixel perfection or identical functionality. That will never be possible, so don’t even bother. However, he’s NOT going to spend any time testing, fixing or hacking IE bugs and the page will still work.

 

This design will never win any awards, but contains typical components such as a header, footer, content, sidebar and drop-down CSS menu. Note that the header and menu are fixed at the top of the browser window. Assume Craig Buckler coded this page using standard HTML5 and CSS. IE9 and 10 will work as he expects but, even though this is a simple design, IE6 fails to render the page correctly. The layout breaks because the floated elements trigger IE6's double-margin bug. The menu appears in the wrong place (display: fixed is not supported) and it’s unusable because IE6 does not allow :hover or :focus on elements other than links. IE7 fares better but its weird margin handling causes the titles to be cropped. He could fix this with conditional CSS or an IE7-specific hack, but life’s too short for that sort of nonsense!

Comments

Be the first to write a comment

You must me logged in to write a comment.