Cross-Browser inline-block without word spacing!
If you’re any sort of respectable web designer, you’ve obviously come across many situations when you’ve had to use divs as a sort of inline block and only wished that you could use display: inline-block to quite simply solve all your layout problems. Instead though, we’ve had to resort to using float: left and then inserting a float clearing div/br after all those floated divs. Sure, it works but it’s not what we really want to end up doing (especially having to throw in extra html markup just for visual correctness).
Well, I’ve since run in to a situation that using float: left wasn’t working for me (try centering a set of divs that have float: left – it’s a pain!), so I had to find some kind of way to use inline-block. Thankfully, Internet Explorer 8 and Firefox 3 support inline-block now, but we still have to deal with those hard-headed users that take forever (or never) to upgrade their browsers. To accomodate Internet Explorer 7 and Firefox 2 we have to use some CSS hacks (what else is new!); thankfully they’re not that bad (but it still invalidates your CSS… bummer).
Read more…