0

IE9 スクリーンショット
ここに画像の説明を入力
ねえ、みんな！私は Nivo Slider を使用してサイトを構築しています (これは通常、大きな成功を収めています)。しかし、この特定の使用法には、理解できない問題がいくつかあります。コード ウィザードの助けを借りていただければ幸いです。

テストサイトはこちら。

Firefox では、いつものように、サイトは素晴らしく見えます。すべてが機能し、何も壊れていません。Opera でもほぼ同じです。

ただし、IE9 では、スライダーは次の画像に移行するまで見栄えがします。スライダーは float:right プロパティを使用し、Explorer では、各トランジションによって画像が一時的にコンテナー div の左側にジャンプします。 この問題は解決しました。 "float:right" プロパティはスライダー イメージにのみ配置され、スライダー コンテナー自体には配置されませんでした。修正されたコードにより、個々の画像とスライダー コンテナー全体の両方が右にフロートするようになりました。

Safari では、ページのサイズを 100% 未満に変更しない限り、スライダーは見栄えがよくなります。その後、画像は周囲のコンテンツと共に縮小しません。

Chrome では、驚くべきことに、すべてがめちゃくちゃになっています。最初のロードでは、スライダーは表示されません。表示サイズを 90% に縮小すると、サイズを 100% に戻しても問題ないように見えます。ただし、キャプション機能は、他のブラウザーほどポップアウトしません (私の言いたいことを理解するには、サイトを参照してください)。 この問題は解決しました スライドを制御する弾丸が問題だったことが判明しました。または、より正確には、それらを囲む div がそうでした。.controlNav の箇条書きの div には、他のすべてのブラウザでは正常に機能する「position:absolute」プロパティがありましたが、何らかの理由で Chrome を台無しにしました。これらの箇条書きは、この特定のサイトには必要ないため、完全に削除しました。問題が解決しました。 残念ながら、使用されているメソッドは、スライダーの Safari レンダリングを完全に台無しにしてしまったので、今それを理解する必要があります。

このトピックについてかなりの検索を行ったところ、特に IE で Nivo Slider に関する多くの問題が見つかりましたが、私が経験していることに正確に関連するものは何もありませんでした。問題の一部は、Slider が通常使用されない float:right プロパティが原因であると思われます (ほとんどのサイトでは、ページの中央に配置された容量で使用されます)。特定。

スライダーの HTML は次のとおりです (Nivo スライダーの CSS のメトリック バットロードがあるため、ここには貼り付けません。ブラウザーの開発者ツールを使用してスタイルシートを確認できます)。

<div id="header">
    <div class="layout-wrapper">
        <aside id="slider" class="theme-default">
            <div id="nivo-slider" class="nivoSlider slider-underline">
                <img src="images/slider-img1.jpg" class="attachment-slider_nivo" title="#slide-1" />
                <img src="images/slider-img2.jpg" class="attachment-slider_nivo" title="#slide-2" />
                <img src="images/slider-img3.jpg" class="attachment-slider_nivo" title="#slide-3" />
            </div>
            <!-- end #nivo-slider -->
            <div id="slide-1" class="nivo-html-caption" data-position="right">
                <span class="slider_title">Tile and Ceramic Cleaning</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
                <a href="#" title="" class="more align-right">Read more »</a>
            </div>
            <!-- end #slide-1 -->
            <div id="slide-2" class="nivo-html-caption" data-position="left">
                <span class="slider_title">Kitchen Cleaning and Sanitizing</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
            </div>
            <!-- end #slide-2 -->
            <div id="slide-3" class="nivo-html-caption" data-position="right">
                <span class="slider_title">Full Residential Services!</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
            </div>
            <!-- end #slide-3 -->
        </aside>
        <div class="banner-1"></div>
        <!-- end #slider -->
    </div>
    <!-- end .layout-wrapper -->
</div>
<!-- end #header -->
<div class="clear"></div>

皆さんが思いつくことができるすべてのヒントに感謝します！

4

1 に答える 1

0

<aside>タグをタグに置き換え<div>ます。私はクロムインスペクターツールでそれを行いましたが、その後はうまくいくように見えました.

私はnivo-slider現在 4 ～ 5 の異なる Web サイトで を使用していますが、<aside>タグが使用されているのを見たことがありません。

于 2013-02-19T22:21:42.170 に答える