IE and inline-block

It was another day of pulling my hair out over the way Internet Explorer unexpectedly displays things….

So my task is to get elements to line up correctly vertically, with some of those elements set to display:inline-block. What I was finding in IE is that one element would be something like 5 pixels higher than the element preceding it. And setting the margin-top of the higher element to 5px wouldn’t fix it. But setting a negative margin on the preceding element would fix it. “Come on,” I told myself. “There’s obviously something I’m not understanding here.”

Those are the moments I start searching the web for enlightenment. And I found this article (thank you rdoherty, whoever you are!)

In this article, it explains that setting an element to display:inline-block sets its vertical-alignment to baseline, which aligns it to its parent’s baseline. The suggested fix is to set it to vertical-align:top. This actually didn’t work in one of my examples, but setting it to vertical-align:bottom did.

Just want to share this fix with someone else that is battling Internet Explorer display issues. So you can save your tresses. Or maybe a bunch of bald-headed web developers marching on Microsoft’s headquarters might make a point….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s