Cross Browser Inline-Block

li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
}

Reference/Explanation here and here.

Comments

  1. User Avatar
    Anton
    Permalink to comment#

    Thank you

  2. User Avatar
    Nora Brown

    Inline-block come in really handy for form layouts (applied to labels, inputs, error spans). Works brilliantly in IE6+, Mozilla 3.6+, Safari, Chrome, etc.

  3. User Avatar
    bogdan

    This is very useful hack! It’s much better than floating li items. Thank you.

  4. User Avatar
    Striker
    Permalink to comment#

    If you want to avoid nasty CSS hacks and don’t care about IE6 (which you shouldn’t), you can ensure proper inline-block handling in all browsers if you use a tag that has a default display of inline (other than the <p> tag).

    So tags such as <span>, <b>, <s>, <q>, <u>, <i>, or <a> work perfectly in all browsers if you apply display:inline-block to them.
    I recommend <span> because it’s semantically similar to <div>.

    Just remember that whitespace between inline-blocks is rendered just like it is between text.

    Click here to see a demo and test it in various browsers.

    • User Avatar
      Jezen Thomas
      Permalink to comment#

      The is a block-level element by default, but good comment otherwise.

    • User Avatar
      Jezen Thomas
      Permalink to comment#

      Darnit, HTML disabled. The *paragraph tag* is block-level by default.

    • User Avatar
      Chris Marlow

      That would be true except for Firefox 2 which is why the -moz-inline-stack is included

  5. User Avatar
    Trev
    Permalink to comment#

    I gotta say, your site is very useful, I end up here frequently, also the css frog rules.

    Not ready to share my site yet, perhaps when It’s a little more finished!

  6. User Avatar
    Amit
    Permalink to comment#

    Hi there, any known issues with inline-block with Chrome, look at this weird behaviour I have found at the new beta version of WordPress 2012 – http://wordpress.org/support/topic/twentytwelve-nav?replies=17

    Any suggestions or ideas anyone ?

  7. User Avatar
    sataj
    Permalink to comment#

    want this with divs

  8. User Avatar
    John Cheesman
    Permalink to comment#

    I’ve ended up adding white-space: nowrap; to my inline-block mixin to fix a issue I was having in Chrome on Android with some <li> breaking onto another line for no apparent reason

  9. User Avatar
    vishal
    Permalink to comment#

    What does mean by display:inline means what does means of “” to put before any property

    Thanks

  10. User Avatar
    Matt
    Permalink to comment#

    Considering it’s September 2014, is it reasonable to simply do: “display: inline-block;” if you aren’t required to support older browsers?

  11. User Avatar
    Gábor
    Permalink to comment#

    Hi,
    I have a problem the inline-block in Chrome and Opera.
    There is the source code: A link.
    There is worked in Chrome and Opera, oddly working in Firefox, it works perfectly in Microsoft Edge in Windows 10, not working Safari. Why now not Working Chrome and Opera? If I overwrite inline-block to block than this working Chrome and Opera, but oddly.
    Thank you very much!

  12. User Avatar
    Karina Rode
    Permalink to comment#

    In modern versions of Mozilla display: -moz-inline-stack causes text collapsing in a div, if the code is e.g.:

    <div>img</div> <div>h1 text text</div>

    And the browser doesn’t recognise paddings in that second div as well.
    Beware of that!

  13. User Avatar
    Binh Thanh Nguyen
    Permalink to comment#

    Thanks, nice tips

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag