IE7 does not understand display: inline-block

by

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="https://stackoverflow.com/questions/6544852/ie7.css" type="text/css" />
<![endif]–->

More Related Contents:

  1. :after and :before CSS pseudo elements hack for Internet Explorer 7
  2. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  3. Pseudo class :hover does not work in IE7
  4. IE7 CSS Scrolling Div Bug
  5. How to place a div over a image? [closed]
  6. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  7. How can I center text (horizontally and vertically) inside a div block?
  8. How do I auto-resize an image to fit a ‘div’ container?
  9. Can I create a div with a Curved bottom?
  10. Google Chrome form autofill and its yellow background
  11. Why do absolute elements stack up on each other instead of stacking one after the other?
  12. Keep the middle item centered when side items have different widths
  13. How can I align two divs horizontally? [duplicate]
  14. Hide vertical scrollbar in element
  15. A CSS selector to get last visible div
  16. How to make Scrollable Table with fixed headers using CSS [duplicate]
  17. Why is the parent div height zero when it has floated children
  18. CSS grid – maximum number of columns without media queries
  19. Can a dynamic class be styled using CSS? [duplicate]
  20. How to change the style of the title attribute inside an anchor tag?
  21. Empty vertical space between columns in Bootstrap 4
  22. Select second last element with css
  23. Css transition from display none to display block, navigation with subnav [duplicate]
  24. Apply CSS Style on all elements except with a SPECIFIC ID
  25. Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?
  26. Select option padding not working in chrome
  27. How to make bootstrap carousel image responsive?
  28. Background-Color of BODY tag applied to the whole HTML [duplicate]
  29. Why use a sprite sheet rather than individual images?
  30. Link external CSS file only for specific Div [duplicate]

Leave a Comment