发表新帖
发表新帖

IE7 does not understand display: inline-block

后端 未结
关注
4 518
迷失自我
迷失自我 2020-11-22 11:01

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

相关标签:
4条回答
  • 青春惊慌失措
    2020-11-22 11:36

    IE7 does not support 'inline-block' properly, more info here: LINK
    Use can use: 'inline' instead.

    What exactly are you trying to achieve? Make us an example and put here: http://jsfiddle.net/

    0 讨论(0)
  • 野趣味
    2020-11-22 11:39

    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 <html>tag like Paul Irish states in his article

    <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

    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 */
}
    0 讨论(0)
  • 生来不讨喜
    2020-11-22 11:40

    use inline, it works with this kind of selectors for list items:

    ul li {}

    or to be specific:

    ul[className or name of ID] li[className or name of ID] {}
    0 讨论(0)
  • 臣服心动
    2020-11-22 11:53

    The IE7 display: inline-block; hack is as follows:

    display: inline-block;
*display: inline;
zoom: 1;

    By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.

    zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won't apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.

    This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.

    <!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
    0 讨论(0)
 看不清?
提交回复
热议问题