ie tricks

ie tricks

<!--[if IE]>
    <style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
<![endif]-->

------------------------------------------------------------------------

<!--[if !IE]>-->
    do something / hide from ie
<!--<![endif]-->

<!--[if IE]>
    do something / only for ie
<![endif]-->

------------------------------------------------------------------------

The only CSS hack I use is the !important one, for example, 
    height : auto !important; 
    height : 1%; 
can be used to give IE layout.

This type of hack forces me to write it all into one CSS file.

------------------------------------------------------------------------

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

------------------------------------------------------------------------

png_fix

  <!--[if lt IE 7]> 
  <script defer type="text/javascript" src="http://cache.lifehacker.com/assets/base/js/pngfix.js"></script>
  <![endif]-->
png fix
    <!--[if lt IE 7]> 
    <script defer type="text/javascript" src="http://cache.lifehacker.com/assets/base/js/pngfix.js"></script>
    <![endif]-->
png_fix

  <!--[if lt IE 7]> 
  <script defer type="text/javascript" src="http://cache.lifehacker.com/assets/base/js/pngfix.js"></script>
  <![endif]-->

------------------------------------------------------------------------

tranparent gif
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

------------------------------------------------------------------------

if IE && (ua = navigator.userAgent)
    /MSIE 7.0/.test(ua)
        it IE7 or IE8
    /Trident/.test(ua)
        it IE8 or better

------------------------------------------------------------------------

<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
    </script>
<![endif]-->

------------------------------------------------------------------------

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

------------------------------------------------------------------------
jquery animate opacity background???
------------------------------------------------------------------------


 •  For android 2.2 Compatiblity, please ensure that your web page has a meta viewport tag.