IE7和IE8不支持默认跨度行为

Question

我正在尝试在以下页面上实现分页控件： http://equiniti.hireserve-projects.com/vacancies.html

正如您在Firefox等体面浏览器中查看时所看到的那样，分页控件将很好地内联，如下所示：

但是，在IE7和IE8中查看时，分页控件如下所示：

默认情况下，这些元素都应该以内联方式显示，因此我不明白为什么它们以这种方式重叠。以下CSS适用于这些元素：

.paginationControls a{
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 20px;
    margin-left: 3px;
    padding: 12px 10px;
    color: #424242;
}

.paginationControls a:hover,
span.arrowNext:hover,
span.arrowPrev:hover,
.paginationControls a.jp-current
{
    color: #ffffff;
    background-color: #E41800;
}

span.arrowNext,
span.arrowPrev{
    background: none repeat scroll 0 0 #FFFFFF;
    color: #424242;
    font-size: 20px;
    margin-left: 3px;
    padding: 12px 10px;
}

以下是我的HTML结构：

<div class="pagination">
    <span class="arrowPrev">« Previous</span>
    <span class="paginationControls"></span>
    <span class="arrowNext">Next »</span>
</div>

有人可以解释为什么在默认情况下跨度应该显示为内联时会发生这种情况吗？我已经尝试过通常的技巧，确保父元素不会浮动但在这种情况下这没有任何区别。

非常感谢任何帮助。这是在虚拟机上的本机IE7和IE8中。

Answer 1

我无法测试IE8，但请尝试申请：

.pagination span{
    display:inline-block
}

我记得默认情况下，span标记不会呈现为块级元素。 您还应指定最小高度和最小宽度以强制阻止。

或者使用div而不是span标记。