Thoughts on IE hack management

Layout-trigger - comparison

layout-trigger triggers layout in reset issues
IE 5 IE 5.5 IE 6 1 IE 7 1
inline block inline block inline block inline block
position: absolute yes yes yes yes yes yes yes yes static or relative Refers to its containing block, and that's where some problems begin.
float: left|right yes yes yes yes yes yes yes yes none The float model has a lot of quirks due to some aspects of a layout element.
display: inline-block2 no no yes yes yes yes yes yes no reset with block or inline in any other ruleset Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.
width any other value than auto yes yes yes yes no yes no yes auto This is often an implicit fix, more often the trigger when hasLayout does things wrong.
height any other value than auto yes yes yes yes no yes no yes auto
  • height:1% is used in the Holly Hack.
  • height:1% causes rare problems; height:0 or 1px is more stable.
  • Is incompatible with overflow: hidden, except in IE6 standards mode (where height: 1% reverts to height: auto, unless the parent has a specified height.)
  • IE 7 doesn't expand boxes with explicit height; this layout-trigger should be hidden
zoom: any value other than normal (MSDN) no no yes yes yes yes yes yes normal
  • MS proprietary, not valid
  • can be used for debugging
writing-mode: tb-rl (MSDN) no no yes yes yes yes yes yes lr-tb MS proprietary, not valid
overflow: hidden|scroll|auto no no no no no no no yes visible This property did not apply in IE < 7, unless “layout” was added to the box by other triggers.
overflow-x|-y: hidden|scroll|auto no no no no no no no yes visible As part of the CSS3 box model module, overflow-x and -y are not widely implemented yet.
position:fixed no no no no no no yes yes static or relative
min-width: any value no no no no no no no yes auto (not valid) Even the value 0 lets the element gain layout.
min-height: any value no no no no no no no yes auto (not valid) Even the value 0 lets the element gain layout.
max-width: any value other than 'none' no no no no no no no yes none
max-height: any value other than 'none' no no no no no no no yes none

Notes

  1. Refers to IE 6/7 in standards mode; IE 6/7 in quirks mode behave like IE 5.5.
  2. Elements having both “layout” and display: inline behave in a similar way as what the standards say about inline-block: they flow horizontally like words in a paragraph, are sensitive to vertical align, and apply a sort of shrink-wrapping to their content. As soon as the inline elements have layout, they act as inline-block, this is an explanation why, in IE/Win, inline elements can contain and hold block-level elements with less problems than in other browsers, where display: inline remains inline.

Additional styles for IE - comparison

CSS Filter/Hacks Conditional Comments Mixture of CSS Filter/Hacks and Conditional Comments
Description
use of CSS browser bugs to separate styles within style sheet use of MS-proprietary HTML comments: conditional comments one stylesheet for all IEs via conditional comment; separation with CSS hacks
Syntax
IE 5 | 5.5 | 6 | 7
commented backslash hack
  1. /* \*/
  2. .gainlayout {height:1%;}
  3. /* */

height:1% (or 100% or any other value in %) is safe in all browsers (except IE 5 Mac) unless the parent has an explicit height applied3. height:100% is either resolved as 'height: auto' or 'height: 100%' and will therefore work in nearly all cases.

In rare cases height:1% is not stable.

IE 5.5 | 6 | 7
A Trip Switch
  1. .gainlayout {display: inline-block;}
  2. .gainlayout {display: block;}
The first rule triggers haslayout=true, the second makes the element block (or whatever needed, even inline2) again but does not remove layout.
IE 5 | 5.5 | 6
  1. commented backslash hack and star html hack (Tan hack):
    1. /* \*/
    2. * html .gainlayout { height: 1px; }
    3. /* */
    with height:1% known as Holly hack
  2. underscore hack
    1. .gainlayout { _height: 0; }
IE 7
  1. .gainlayout { min-height: 0; }
This will have no negative side effect in any browser.
IE 5 | 5.5 | 6
  1. layout-trigger in style element in conditional comment
    1. <!--[if lte IE 6]>
    2. <style type="text/css">
    3.  
    4. .gainlayout { height: 1px; }
    5.  
    6. </style>
    7. <![endif]-->
  2. link to external stylesheet in conditional comment
    1. <!--[if lte IE 6]>
    2.  
    3. <link rel="stylesheet" href="ie5-6fix.css" type="text/css" />
    4.  
    5. <![endif]-->
    The linked stylesheet contains the needed layout-triggers for IE 5 | 5.5 | 6, example shown above.
IE7
  1. layout-trigger in style element in conditional comment
    1. <!--[if IE 7]>
    2. <style type="text/css">
    3.  
    4. .gainlayout {min-height: 0;}
    5.  
    6. </style>
    7. <![endif]-->
  2. link to external stylesheet in conditional comment
    1. <!--[if IE 7]>
    2.  
    3. <link rel="stylesheet" href="ie7fix.css" type="text/css" />
    4.  
    5. <![endif]-->
    The linked stylesheet contains the needed layout-triggers for IE 7, example shown above.
IE 5 | 5.5 | 6 |7
  1. layout-triggers in style element in conditional comment
    1. <!--[if lte IE 7]>
    2. <style type="text/css">
    3.  
    4. /* IE 5 | 5.5 | 6 */
    5. * html .gainlayout {height:1px;}
    6.  
    7. /* IE 5 | 5.5 | 6 and 7 in quirks mode only */
    8. * html .gainlayout {height /**/:1px;}
    9.  
    10. /* IE 5.5 | 6 | 7 */
    11. .gainlayout {zoom:1;}
    12.  
    13. /* IE 7 */
    14. .gainlayout {min-height:0;}
    15.  
    16. </style>
    17. <![endif]-->
  2. link to external stylesheet in conditional comment
    1. <!--[if lte IE 7]>
    2.  
    3. <link rel="stylesheet" href="ie5-7fix.css" type="text/css" />
    4.  
    5. <![endif]-->
    The linked stylesheet contains the needed layout-triggers for IE 5 | 5.5 | 6 | 7, example shown above.
Pros
  • everything stored in one css document = easy to maintain
  • markup keeps clean
  • IE6/7 in quirks mode by accident1 will get the needed parts
  • doesn't affect any other browser than IE
  • future IE versions don't get any of the hacks
  • all hacks stored in one file
  • doesn't affect any other browser than IE
  • IE6/7 in quirks mode by accident1 will get the needed parts
  • future IE versions don't get any of the hacks
Cons
  • every browser has to read the hacks, if needed or not
  • you have to be aware of all future browser versions, not only of IE's
  • special care for IE5 Mac needed
  • IE6/7 in quirks mode (by accident1) will not get the needed parts
  • additional markup needed
  • maybe need to change HTML for future browser version
  • additional markup needed
  • maybe need to change HTML for future browser version

Notes

  1. Example for quirks mode by accident: google cache
  2. Elements having both “layout” and display: inline behave in a similar way as what the standards say about inline-block. See the section “Notes on elements at inline level”
  3. This applies to browsers in standards mode. Geckos in quirks mode take heights in % serious even if the parent has no explicit height.

Recommendation

Whatever method you choose, whatever hack you use – do it with care…

This “Thoughts on IE hack management” chapter is part of the article On having layout.

Created, and last updated:
May 14, 2007
June 11, 2007
Author:
Corina Rudel
Editors:
Ingo Chao
Bruno Fassino
Georg Sørtun
Philippe Wittenbergh
Contact us:
Copyright notice:
This work is published under a Creative Commons license.