disable Compatibility View

Remember that this can also affect IE9 and even IE10 if they are used in their "Compatibility View" modes that emulate older versions. To prevent these newer IE versions from slipping back into prehistoric modes, we suggest you always use an X-UA-Compatible tag or HTTP header. If you can use the HTTP header it is slightly better for performance because it avoids a potential browser parser restart.

if (isset($_SERVER['HTTP_USER_AGENT']){
    if( 
false !== strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') )){
        
header('X-UA-Compatible: IE=edge');
    }
}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge" env=ie
    </IfModule>
</FilesMatch>

settare compatiblità dell'engine: per i vecchi siti impostare vecchie versioni di ie, es. se è testato con ie7, si mette ie7. per far funzionare border radius e le ultime direttive mettere ie9

http://msdn.microsoft.com/en-us/library/ie/cc288325(v=vs.85).aspx

    <meta http-equiv="X-UA-Compatible" content="I9" />

Elements are disappearing

When dealing with floated elements in Internet Explorer it is possible that some elements seem to completely disappear. This is commonly referred to as the peekaboo bug. If you apply position:relative to the vanishing element it should pop right back into place. I've also seen elements disappear in print and not screen despite using the same stylesheet in IE7.

Margins seem to be doubled

Another float issue found in Internet Explorer. Some people might be tempted to take the easier way out and deliver different CSS code to Internet Explorer, whether by hacks or comments. It's best to avoid these practices and try an alternate route. Although Internet Explorer can become clueless with margins and float, it will still understand padding. If possible, set the margins to 0 and try to compensate with padding either on the element itself (if it doesn't affect the appearance) or on a parent element.

Element with a height of 1px, but Internet Explorer increases it to 10px

Internet explorer uses the line-height of an element as a kind of unintentional min-height. So, if you try to set a div to height:1px for example (such as a decorative element) and the default line-height (probably inherited from parent elements) for that element is set to 10px, the height of that element will be forced to the line-height in Internet Explorer. To get around this, you can set line-height:0 and manually set the height.

An empty anchor tag is not clickable

It may seem unusual, but in my experience I have come across this more than once. Say you have an anchor element that you've given display:block and some dimensions with no content or background image, in order to make a clickable area, but in Internet Explorer it's not clickable. In order to keep the anchor invisible you can add a transparent 1px background-image. Suddenly, Internet Explorer understands that this is a clickable element. An element's text is squished, causing it to flow downward More than likely this is caused by floating an element without setting a width or by a floating sibling element's width being slightly too small where the squished element can't break out. Try setting a width on the squished element, or a larger width on the sibling element. If these methods don't work, use clear to break the element away from the floated sibling element.

"Give layout" to elements

The source of most of Internet Explorer's bugs comes from an IE-only property called layout. An element can either have layout or not, which determines how an element is rendered by the browser. Most of IE bugs can be squashed by giving layout to the offending element, which is done simply by assigning one of the following properties to that element:

position: absolute [IE 6 & 7] float: left [IE 6 & 7] float: right [IE 6 & 7] display: inline-table [IE 6 & 7] any width or height value [IE 6 & 7] zoom [IE 6 & 7] min-width [IE 7] max-width [IE 7] min-height [IE 7] max-height [IE 7] overflow [IE 7]

Among these, the most common way to "give layout" to an element – and thus, eliminate the bug – is to assign the following rule:

  1. the-buggy-element { height: 1%; }

However, if the problem persists, you might want to add a "position" to that element. This fixes the problem more often than not.

#the-buggy-element {
    position: relative;
    height: 1%;
}

5. Prevent the double margin bug from crumbling your layout

This one has saved me a lot of headaches, because IE 6 has a tendency to double the margins of every element, which has been floated and assigned a left/right margin. To overcome this bug, simply set display: inline on the offending element. This will magically make the bug disappear with no adverse effects on your layout.

If you've found these tips useful and your future IE-development experience somewhat more pleasant, I invite you to share your thoughts by commenting below.

IE8

 
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
playonlinux ie8

Dimensions IE8 and earlier versions of IE, included padding and border in the width property.

To fix this problem, add a recent doctype to the HTML page.

<!DOCTYPE html>

console: IE8 non ha un oggetto console definito se non si attiva la developer bar

if (typeof console == "undefined") {
  this.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}

Stop IE Page Load Flicker

OKA Fajax (fake ajax). For example, when submitting a form and the next page is mostly similar to the new page, the entire page isn't whited out and redrawn, it blends smoothly to the next (IE only).

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->

HTML5

le vecchie versioni di IE vanno integrate con html5shiv

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.js"></script>
    <![endif]-->