0

私のページ (BXSlider) に JQuery Slider を追加しました。これは、IE (7 & 8) のこのページを除くほぼすべてのページ (すべてのブラウザー) で正常に動作します。

スライダー内の画像が読み込まれますが、スライドされたテーブルの代わりに大きな空白スペースが表示されます (はい、この時点でテーブルである必要があります)。

投稿されたリンクで申し訳ありませんが、これを理解できず、ここに追加する必要があるコードがわかりません... CSSの問題ですか、それともJQuery/Javascript関連ですか?

誰かが私に正しい方向を示してくれることを願っています…</p>

どうもありがとう、ヨッヘン

4

1 に答える 1

2

上記のコメントで述べたように。スライダーを実装する方法では、間違った html が生成されます。bxslider は、画像を含む td の外側にある 2 つの div をラップするため、次のような HTML 構造が得られます: table > tr > div > div > td。これが IE に問題がある理由です。ブラウザはそれで正しいのです。 . テーブルを取り除くことができない場合 (私が好む)、次の操作を行います。

スライダー テーブルの HTML を次のように変更します。

<table border="0">
    <tbody>
        <tr>
            <td>
                <div class="bx-box">[.. YOUR LINKS AND IMAGES .. ]</div>
            </div>
        </tr>
    </tbody>
</table>

JS では次のようにします。

$(function(){
    // change your your selector to the nested div container
    // and tada it works in ie too.
    $('td .bx-box').bxSlider({
        infiniteLoop: true,
        hideControlOnEnd: true
    });
});

これで、bxSlider がその周りにラッパー div を追加し、スライダーがクロス ブラウザーに表示された後も、コードは有効なままになります。ここにデモがあります。そして、コードを検証してください。内部にさらにエラーがあります (タグを二重に閉じるなど)。これにより、最も奇妙なレイアウト動作が発生する可能性があります。

于 2013-02-01T16:04:28.983 に答える