IE9 Issue: Text in div is aligned to bottom

Question

I have anchors that are separated by  |  . This is all wrapped in a div.linksWrapper . In IE9 any text (in this case  |  ) that is a direct descendant of div.linksWrapper is offset from the center of the other elements. In all other browsers  |  renders aligned with the anchors.

See image below...

html

<div class="instagramViewerWrapper">
    <div class="linksWrapper">
        <a class="active" href="#">VIEW ALL</a>&nbsp;|&nbsp;
        <a id="40020931" href="#" class="">KATHERINE</a>&nbsp;|&nbsp;
        <a id="40027696" href="#" class="">MELISSA</a>&nbsp;|&nbsp;
        <a id="42768724" href="#">MICHELE</a>&nbsp;|&nbsp;
        <a id="42764826" href="#">CAILEE</a>&nbsp;|&nbsp;
        <a id="42767242" href="#">CHRISTIE</a>&nbsp;|&nbsp;
        <a id="42763829" href="#">JAMIE</a></div>
    <div class="grid" id="instagramViewer">...</div>
</div>

css

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
.instagramViewerWrapper {
    color: #888888;
    margin-top: 30px;
    min-height: 1040px;
}
.instagramViewerWrapper .linksWrapper {
    position: relative;
    text-align: center;
}
.instagramViewerWrapper .linksWrapper a {
    color: #888888;
    display: inline-block;
    padding-bottom: 5px;
}

Answer 1

Instead of using some non-semantic separators like  |  , you can do this:

.instagramViewerWrapper .linksWrapper a {
    color: #888888;
    display: inline-block;
    padding: 0 5px 5px;
    border-right: 1px solid #ccc;
}

This will draw a border to your links, so they will be aligned with the text and your code will be much cleaner too.

Answer 2

This is simply caused by the fact that you're applying padding-bottom: 5px; on your anchors ( .instagramViewerWrapper .linksWrapper a ). Apparently other browsers ignore it, but not IE.

Either move the rule declaration to include all of .instagramViewerWrapper .linksWrapper , or remove it altogether.

Hope that helped!