2

Respond.js を追加すると、Owl Carousel を IE8 で動作させることができないようです。他の誰かがこれを行うことができましたか? どこからトラブルシューティングを開始すればよいかさえわかりません。

私が言及している jQuery カルーセル プラグインは、http: //owlgraphic.com/owlcarousel/ です。

4

2 に答える 2

2

私はこの質問が少し古いことを知っていますが、今日IE8とOwl Carouselに問題がありました(うまくいけば、これは同様の問題です)。

問題:ページが設定したいくつかのカルーセルでアイテムをレンダリングすると、アイテムがカルーセル コンテナーの外側にオーバーフローします。ページのサイズを変更するとすぐに、すべてが正しい位置とサイズにレンダリングされます。これは、IE で問題を引き起こす .resize() が原因である可能性があります。

解決策: IE 条件内の ie.css ファイルと一緒に、respond.js を実行しました。また、条件内で html5shiv も実行します。

<!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet" type="text/css"/>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

次に、CSS で各カルーセル ID に固定幅を指定します。デモ フクロウ カルーセルを見ると (全幅の背景色があったため、[同様に機能する] 本文を作成できませんでした):

<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
  ...
</div>

そして、私のie.cssファイルで、そのIDに幅を設定しました

#owl-example{width: 1024px;}

それを行った後、私のページは正しくレンダリングされ、Owl Carousel は正しく機能します。上記のアダムのコメントで述べたように、誰かが IE8 を使用している場合、レスポンシブとは何かをおそらく知らないので、幅を設定することはユーザーにとって満足できるものであり、respond.js が機能しているため、いつでも IE8 で筋肉を付けることができます。目的のブレーク ポイントでメディア クエリを使用します。うまくいけば、これが役に立ちます。

于 2014-06-02T22:18:12.333 に答える