2

だから、これは奇妙なものです...

基本的なページ付けコードがあります：

<div class="pagination">
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a>
</div>

そして、すべてを中央に配置したいので、アンカータグにインラインブロックを使用しています。十分に単純で、CSSコードを取り除いたもの：

.pagination{text-align:center; margin-bottom:20px;}
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;}
.ie7 .pagination > a{zoom:1;}
.pagination .next,
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden;
background:url(../images/page-arrows.png) no-repeat;}
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e;
background:url(../images/page-numbers.png) left top no-repeat;}

問題は、IE7（少なくともIE9のIE7モード）では何も表示されないことです。私はIE7にある表示インラインのバグをよく知っていますが、それらはデフォルトでインラインではない要素にのみ適用されます。とにかくズーム：1で追加しました。

.paginationラッパーに背景色を設定すると、そのラッパーは実際に背景色で表示されますが、内部の要素が表示されません。

私は通常のIEの「修正」を試しました...position：relative、zoom：1、height：1％すべての要素で試しましたが、運はありません。

何が足りないの？

4

1 に答える 1

1

JSFiddleでいくつか実験した後、問題がこの特定のルールに関連していることを発見しました。

.pagination .prev {text-indent:-9999px; }

これを無効にすると問題は修正されますが、背景画像の上にテキスト文字が表示されるため、理想的ではありません。

興味深いことに、あなた.nextは同じ問題を引き起こしません。そのことを念頭に置いて&nbsp;、ページングコントロールのいずれかの側にを追加し（中央の配置が歪まないようにします）、問題が修正されたようです。

<div class="pagination"> 
    &nbsp; 
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a> 
    &nbsp;
</div>

ここで利用可能なJSFiddle（明らかな理由で背景画像が単色に置き換えられました）

于 2012-08-15T15:43:18.287 に答える