1

サードパーティのAPIが構築するHTMLがあるため、出力を制御できません。変更できるのはCSSだけです。可能であれば、JavaScriptは使用したくないです。

私がやろうとしているのは、2番目の要素を使用float:leftして2つの要素を交換することです。これにより、最初の要素の前に表示されます。これは最新のブラウザではうまく機能しますが、「スワップされた」要素が古いIEブラウザ（具体的には6と7、および互換モードのIE）では2行目に移動します。

jsFiddleの例

HTML（変更できません）

<div class="wrapper">
    <a class="page">Page: &nbsp;</a>
    <a class="previous">Prev</a>
    <span>
        <a>1</a>
        <a>2</a>
    </span>
    <a class="next">Next</a>
</div>​

CSS

.wrapper{
    line-height:36px;
}
.wrapper span, .page{
    float:left;
}
.wrapper span a, .page{
    display:inline-block;
}
.wrapper span a{
    width:20px; 
}
.previous, .next{
    width:30px;
    display:inline-block;
}

最新のブラウザのスクリーンショット

最新のブラウザのスクリーンショット

InternetExplorerのスクリーンショット

InternetExplorerのスクリーンショット

4

4 に答える 4

2

float:right;この問題は、IE6とIE7（IE8には存在しない）が左揃えの要素内でどのように処理されるかに関するバグであることが判明しました。IE6とIE7は、（最新のブラウザーのように）コンテンツを超えて、要素を左に最も近いポイントに配置するのではなく、要素を可能な限り右端のポイントに配置します（これは、定義に関してはそれほど違いはありませんが、しかし、このような場合には大きな違いがあります）。

とにかく、この制限を乗り越えるためにfloat:right;、解決策として使用することはできませんでした。の幅（可変ページ数）を知る方法がなかったため（JavaScriptがなければ、OPは使用すべきではないと述べました.content span）、静的な幅をに使用することはできませんでした.wrapper。代わりに、「次へ」と「前へ」のリンク要素は最後まで「破棄」され、のが把握された.wrapper後に絶対的に（に対して）配置される必要がありました。width.wrapper

jsFiddleの例

魔法のCSS

.wrapper {
    float:left; /* Can be 'display:inline;' instead, but this makes it possible to treat this as "block" */
    clear:left; /* Can be discarded if 'float:left;' isn't used */
    position:relative; /* Keeps 'next'/'prev' contained */
}
.page, span {
    float:left; /* Positions 'Page:' and page numbers on left */
}
.page, span a {
    padding-right:.5em; /* Can change this to whatever */
}
.previous {
    position:absolute;
    right:-6em; /* Width (including padding, borders, etc) of .previous and .next */
    width:2.5em;
    padding-right:.5em;
}
.next {
    position:absolute;
    right:-3em; /* Width (including padding, borders, etc) of .next */
    width:2.5em;
    padding-right:.5em;
}
于 2012-05-30T03:49:22.453 に答える
0

具体的には、どのバージョンのIEが「古いIEバージョン」ですか？IE6の場合、bfrohsは、インラインブロックが混乱している可能性があることを示しています。私はあなたのフィドルをいじって、これを思いついた：

http://jsfiddle.net/chippper/5rzVQ/15/

CSS：

.wrapper{
    line-height:36px;
}
.wrapper span, .page{
    float:left;
    display: inline;
}

.wrapper span a{
    width:20px; 
    float:left;
    display: block;
}
.previous, .next{
    width:30px;
}

これはあなたが求めている効果を達成しているようです。IEにチェックインしていませんが、インラインブロックを使用していないため、機能する可能性が高くなります。

于 2012-05-29T17:31:52.417 に答える
0

あなたが持っている問題はですdisplay:inline-block;。

IE6 / 7には、この表示タイプに関する既知の問題があります。要素のデフォルトの表示タイプがであるblock場合（つまり、<div>要素に適用しているため、この場合のように）は機能しません。

この回避策は、display:inline;代わりに使用することです。この回避策は、IE6 / 7にも表示タイプのバグがあるという事実を利用しています。つまり、場合によってinlineは代わりに使用できるということです。inline-block

明らかに、他のブラウザーのスタイルを採用したくないinlineので、CSSハック、条件付きコメント、またはIE6/7に固有のスタイルを適用する他の方法を使用する必要があります。

お役に立てば幸いです。

于 2012-05-29T21:25:42.957 に答える
-1

CSSセレクターとしてタグ名を使用すると、古いバージョンのIEでは正しく機能しません。idまたは名前をcssセレクターとして使用するclassと、うまくいくはずです。

于 2012-05-29T17:07:36.780 に答える