IE9问题：div中的文本与底部对齐

Question

我的锚点由 | 分隔。这全部包含在div.linksWrapper中。在IE9中，作为 | 的直接后代的任何文本（在本例中为div.linksWrapper）都偏离其他元素的中心。在所有其他浏览器中 | 渲染与锚点对齐。

见下图...

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

您可以执行以下操作，而不是使用 | 之类的非语义分隔符：

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

这将为您的链接绘制边框，因此它们将与文本对齐，您的代码也将更加清晰。

Answer 2

这只是因为您在锚点（padding-bottom: 5px;）上应用.instagramViewerWrapper .linksWrapper a这一事实。显然其他浏览器会忽略它，但不会忽略IE。

移动规则声明以包含所有.instagramViewerWrapper .linksWrapper，或完全删除它。

希望有所帮助！