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

我有由

|

分隔的锚。这一切都包装在一个

div.linksWrapper

中。在IE9中，作为

div.linksWrapper

的直接后代的任何文本（在本例中为

|

）都从其他元素的中心偏移。在所有其他浏览器中，

|

渲染与定位对齐

见下图

html

---

您可以执行以下操作，而不是使用一些非语义分隔符，如

|

：

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

---

这将在链接上画一个边框，这样链接将与文本对齐，代码也将更加清晰。

这只是因为您正在应用

填充底部：5px在您的锚点上（
.instagramViewerWrapper.linksWrapper a
）。显然其他浏览器忽略了它，但IE没有

移动规则声明以包含所有
.instagramViewerWrapper.linksWrapper
，或将其全部删除

希望有帮助
 但是，这并不能解释垂直管道未对齐的原因。不，这并不能解释，它告诉OP如何避免完全使用它们。这解释了垂直管道未对齐的原因，但给OP留下了一些非常脏的代码；-）@ZoltanToth嗯，我认为问题是“为什么管道未对齐？”与“在一些内联元素之间制作垂直分隔符的最佳方法是什么？”另一方面，我同意这种方法根本不是最好的。甚至可能都不太好。再一次，我只是想回答这个问题：）
borders
绝对是实现这一点的方法。我将尝试使用borders。我喜欢这个主意。谢谢Abody97我不同意，边框的样式不如语义灵活，所以我认为最好的解决方案是使用伪选择器
：after
。这样，在仍然能够设置分隔符样式的情况下，就不会有难看的语义。
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;
}

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