Search code examples
cssinternet-explorer-8quirks-mode

Making layout work in IE8 quirks mode

A third party product outputs a webpage with iframes and I'm not in full control of the content. The main iframe is missing doctype declaration and this forces IE8 into quirks mode.

I'm maintaining a javascript application that adds several buttons to the right edge of the screen. The problem is that the layout is off in IE8 quirks mode. The buttons are not visible (probably due to incorrect IE z-index behavior) and their position is off.

I was thinking about creating a separate CSS for IE8. How should I go about tuning the CSS for quirks mode?

Solution

  • If you do have control over the (separate) Javascript files, and presuming that a JS file is already called in the head, you could set a conditional class on the html element, like this: 

    <html>
<head>
    <title>Demo Conditional Class Quirks Mode</title>
    <script type="text/javascript" src="folder/js_file.js"></script>
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        left: 100px;
        }
    .ieQM div {
        left: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    While adding this to the js_file.js: 

    if (document.documentMode == 5)
    document.documentElement.className += ' ieQM'; // IE in Quirks Mode

    .
    By the way, I wonder whether it is just a problem in IE8, the document not having a doctype? Don't all IEs revert to quirks mode without it?