Ie7 does not understand display: inline-block

Demystifying the hack

This IE7 hack hinges on its peculiar internal property, hasLayout. When a CSS element holds hasLayout, it behaves like inline-block. *display: inline and *zoom:1 together are the magic spell to trigger this property.

IE7, an oddball

IE7 is the Elephant's Graveyard of layouts. Its quirks include the * hack, used exclusively for IE7 and its older siblings, but don't expect validation from CSS validators. In case you desire clean code with no hiccoughs, employ conditional comments to link to an IE7-specific stylesheet.

IE7-only stylesheet with Conditional Comments:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->


Two roads: Progressive enhancement and Graceful degradation

Consider "the way of the future" — Progressive Enhancement. It provides basic functionality while enhancing the user experience for modern browsers. For our 'retro' IE7, we apply Graceful Degradation to keep everything functional and decent-looking, even without advanced styling.

Thinking outside the (layout) box

IE7-compatible CSS techniques offer a lifeline. Options boomerang back to:

• Floats: They will do just right if your mission is aligning elements side by side. Floats are the old school, but still in session.
• Tables for layout: Old and shunned, wrapping elements in table cells might mimic inline-block when needed.
• Contortions with padding/margins: Pad, squeeze, stretch…the visual semblance could be your saving grace.

If all else fails

Sometimes, the best of fallbacks hang us out to dry. It might be the time to re-consider the design for IE7 or even question the need for IE7 support. Nothing lasts forever, and stats speak volumes.

Detecting features, not browsers

The coding universe preaches feature detection libraries like Modernizr instead of browser user-agent detection. This way, you make your code ready for the future, and also impervious to misidentification due to user-agent string spoofing.

Testing your IE7 hacks

Make tools like http://jsfiddle.net/ your best friends. They let you create, troubleshoot, and share your CSS, helping to unfurl and fix IE7 compatibility issues. A hands-on approach is the quickest way to wisdom!

Leveling the playing field with CSS reset

A CSS reset is the knight in shining armour for consistent cross-browser look. Clearing default browser styling, it drastically brings down inconsistencies, especially for the older, fussier brood like IE7.

Keeping up with best practices

Even when you walk the fine line with non-standard hacks and workarounds, good coding practices should not be cast aside. Also, it's smart to envisage the inevitable—legacy browser sunset.