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 ，或者完全刪除它。

希望有所幫助！