Bane for Evil Incarnate! (IE Hacks)

Started: 2011-06-21

Internet Explorer 7 and earlier don’t support the CSS value inherit for any properties other than direction and visibility.

IE 8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height.

IE Polyfills

ieresponsify

<style>
.root-em {
    font-size: 16px;
}
.ie-rem {
    font-size: 16px;
    font-size: 1.2em;
}
li {
    font-size: 1.2em;
}
</style>
<ul>
    <li>list
        <ul class="root-em">
            <li>sub-list</li>
        </ul>
    </li>
</ul>

Tools

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js#startOpened,startInNewWindow"></script>

CSS

Has Layout

/**
 * @see http://msdn.microsoft.com/en-us/library/ms532990%28VS.85%29.aspx
 * @see http://reference.sitepoint.com/css/haslayout
 * @see http://www.satzansatz.de/cssd/onhavinglayout.html
 * @see http://reference.sitepoint.com/css/haslayout
 */

javascript:alert(eid+'.hasLayout: '+eid.currentStyle.hasLayout);

The object that the filter is applied to must have layout before the filter effect displays. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

Conditional Hacks

.box {
    background: #00F; /* all browsers including Mac IE */
    background: #00F\9; /* IE9 and bellow */
    background: #00F/; /* IE8 and bellow */
    *background: #F00; /* IE 7 and below */
    _background: #0F0; /* IE 6 and below */
    _bac\kground: #F60; /* IE 6 only */
    padding: 7px;
    color: #FFF;
}

p { font-family: Arial \0/ !important; } /* IE9 and bellow? font-family is special. */

html>body .box{
    *background: #f00; /* IE 7 only */
}

.box {
    background: #00f; /* all browsers including Mac IE */
    *background: #f00; /* IE 7 and below */
    _background/**/: #0f0; /* IE 5.0 */
    _background:/**/ #f62; /* IE 5.5 only */
    _background/**/:/**/ #f61; /* IE 6 only */
    padding: 7px;
    color: #fff;
}

display

IE6 Supports

none, block, inline, table-header-group and table-footer-group

IE7 Supports

none, block, inline, table-header-group, table-footer-group and inline-block supported on normally inline elements.

IE8 Supports

none, block, inline, inline-block, table-header-group, table-footer-group, run-in, table and table-*

float height Bug Fix in IE7

Consecutively floated elements IE7 ignore height and width settings, treating height:auto and width:100%. To be clear, this does not affect the 1st floated element. Only the floated elements following the first. This can be fixed with min-height and max-width. If necessary you can also set max-height and min-width to enforce standard height and width settings.

selector{
    float:left;
    height:50px;/* All non-IE7 browsers. */
    min-height:50px;/* IE7 only */
    width:100px;/* All non-IE7 browsers. */
    max-width:100px;/* IE7 only */
}

selector{
    float:left;
    height:50px;/* All non-IE7 browsers */
    min-height:50px;/* IE7 only */
    max-height:50px;/* IE7 only */
    width:100px;/* All non-IE7 browsers */
    min-width:100px;/* IE7 only */
    max-width:100px;/* IE7 only */
}

General float bugs in IE6/7

body{
    position:relative
}

min-height Bug Fix in IE6/7

http://www.dustindiaz.com/min-height-fast-hack/
http://www.webmasterworld.com/css/3128123.htm

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

CSS Selectors

Child selectors “>” do not work in IE6 but do in IE7+.

Generic CSS for IE6 and Lower

http://code.google.com/p/universal-ie6-css/

<!--[if ! lte IE 6]><!-->/* Stylesheets for browsers other than Internet Explorer 6 */<!--<![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection"><![endif]-->
<!-- Or for light-on-dark version -->
<!--[if lte IE 6]><link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1b.css" media="screen, projection"><![endif]-->


/* Hides from IE5-mac \*/
* html .buggybox { height: 1%; }
/* End hide from IE5-mac */

/* Holly Hack: Hide From IE5/Mac \*/
* html img { margin:45px 0; vertical-align:middle; }
* html input { margin:39px 0; vertical-align:middle; }
/* Holly Hack: End Hide From IE5/Mac */

HTML

IE Conditional Comments

<!--[if lt IE 8 ]> IE 7 or lower <![endif]-->
<!--[if IE 8 ]> IE 8 <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> IE 9+ or any other browser <!--<![endif]-->

Added .ie and .ie6 to your HTML

<!--[if IE]><div class="ie"><![endif]-->
<!--[if lt IE 7]><div class="ie6"><![endif]-->
    Your site content goes here
<!--[if lt IE 7]></div><![endif]--> 
<!--[if IE]></div><![endif]-->

<!--[if lt IE 8 ]> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en" class="no-js"><!--<![endif]-->

IFrame

Transparency - IE 8 and Lower

<iframe allowTransparency="true">Without this proprietary attribute no transparency for iframes in IE8 or lower</iframe>

Scrollbars

Iframe Scrollbar Iframe Scrollbar: IE’S MOMENTARY LAPSE OF REASON

Media

FavIcon

Prior to IE 9
<link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico" />

IE 9+

<link rel="SHORTCUT ICON" type="image/x-icon" href="http://www.mydomain.com/myicon.ico" />

Favicon Creation

Prior to IE 9

16x16 & 32x32 http://msdn.microsoft.com/en-us/library/ms537656.aspx#Create_the_Correct_Size_Icon

PNG Transparency

http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/ http://www.pcmag.com/article2/0,2817,1645187,00.asp#fbid=00jRnNvWYQO

FileNav