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….