Question

我有一个分页栏，用于保存页面项目。我们的应用程序必须支持i18n。然后我们发现在显示中文时文本无法按预期方式对齐。

以下是ff和ie6的结果。

请注意，在IE6中，下一页 li无法与其他li对齐。有什么问题？

Answer 1

更改自：

.page li
{
    display: inline;
    list-style: none outside none;
    margin: 0;
    vertical-align: top;
}

为：

.page li
{
    display: inline;
    list-style: none outside none;
    margin: 0;
}

Answer 2

标记，特别是样式对于旧版IE而言过于复杂，并且尝试修复样式往往会导致进一步的复杂化和不稳定的解决方案。因此，如果您更愿意解决问题，而不是“做正确的事”，这里有一个强大的标记方法：

<table align=center class=page>
    <tr>
        <td><a href="...">Next</a>
        <td><a href="...">1</a>
        <td><a href="...">下一页</a>
</table>

可以很容易地对CSS中的填充，字体，颜色等进行微调。

你仍然会在IE 6上遇到问题，因为它经常在没有中文语言支持的情况下安装。由于缺少合适的字体，使用IE 6的开箱即用PC用于将中文字符显示为小矩形。

Answer 3

.page ul
{
    margin: 0;
    padding: 0;
    text-align: center;
    line-height:40px;
}
.page li
{
    display: inline;
    list-style: none outside none;
    margin: 0;
    line-height:40px;
}
:first-child + html .page li a
{
    margin-right: 0px;
}
.page a, .page a:visited, .page a:active
{
    border: 1px solid #9AAFE5;
    color: #2E6AB1;
   padding: 5px 0.5em;
    text-decoration: none;
    line-height:40px;
    vertical-align:bottom;
}

jsFiddle

IE6中不同语言的文本对齐方式不同

3 个答案: