IE7 does not understand display: inline-block

Question

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inl

Answer 1

Update

As nobody uses IE6 and 7 anymore I will present a different solution:
You don't need a hack anymore, because IE8 supports it by itself

For those who must support those stone age browsers before IE8 (It's not that the IE8 is that old, too cough):
For the account of IE version control, use some Conditional Class in tag like Paul Irish states in his article

By this you will have different classes in html-tag for different IE Browsers

The CSS you need is as follows

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

This will validate and you don't need an extra CSS file

---

Old answer

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}