css - 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>

谁能解释为什么在默认情况下 span 应内联显示时会发生这种情况？我尝试了确保父元素不 float 的常用技巧，但这在这种情况下没有任何区别。

如有任何帮助，我们将不胜感激。这是在虚拟机上的 native IE7 和 IE8 中。

Answer 1

我无法测试 IE8，但请尝试应用:

.pagination span{
    display:inline-block
}

我记得默认情况下 span 标签不会呈现为 block 级元素。您还应该指定 min-height 和 min-width 以强制阻止。

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