我有由 | 分隔的 anchor 。这一切都包装在 div.linksWrapper 中。在 IE9 中，作为 div.linksWrapper 直接后代的任何文本(在本例中为 | )都偏离其他元素的中心。在所有其他浏览器中， | 呈现与 anchor 对齐。
见下图...
html
<div class="instagramViewerWrapper">
<div class="linksWrapper">
<a class="active" href="#">VIEW ALL</a> |
<a id="40020931" href="#" class="">KATHERINE</a> |
<a id="40027696" href="#" class="">MELISSA</a> |
<a id="42768724" href="#">MICHELE</a> |
<a id="42764826" href="#">CAILEE</a> |
<a id="42767242" href="#">CHRISTIE</a> |
<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;
}
最佳答案
这仅仅是因为您在 anchor 上应用了 padding-bottom: 5px; (.instagramViewerWrapper .linksWrapper a)。显然其他浏览器会忽略它，但 IE 不会。
要么移动规则声明以包含所有 .instagramViewerWrapper .linksWrapper，要么将其完全删除。
希望对您有所帮助!
关于html - IE9 问题 : Text in div is aligned to bottom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12266796/