html - 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，要么完全删除它。

希望有帮助！