4

Flexsliderを使用していますが、ある種の問題が発生しました。

実際にデモで見ることができます。これはFirefoxでのみ発生するか、少なくともIE9またはChromeでは表示されません。ブラウザのサイズを約400〜500ピクセルに変更し、最後の2つの画像（丘と鳥）を切り替えると、注意深く見ると、画像が実際に約1ピクセルだけ上下にジャンプすることがわかります。スイッチ。実際には、この動作を再現するためにウィンドウのサイズを変更するために複数回の試行が必要になる場合がありますが、常に表示されるとは限りませんが、少なくとも50％の確率で実行されます。

これは私が知っている非常に小さいですが、私が1200px幅のスライダーをやっていたとき、それは非常に目立ちました。問題が実際に固有のものであることに気付くまで、問題の追跡に何時間も費やします。

しかし、私が発見したのは、画像にキャプションが付いている場合（<p>タグが使用されている場合）、画像はこの動作を示さないということでした。これは、firebugを使用して確認できます。

私の質問はこれです：この振る舞いを防ぐためにpタグが何をするか知っている人はいますか？強制的に機能させることができるのは素晴らしいことですが、回避できるのであれば、マークアップで意味のない空の段落タグを使用することは避けたいと思います。

4

1 に答える 1

11

cssに次のコードを追加して修正しました。理由はわかりませんが、<li>タグの外側（またはタグの内側に高さがある？）で安定した状態を維持するために何かが必要なようです。リストスタイルをディスクに変更することもできますが、それは見栄えがよくありません。

.slides li:after {
content: ".";
position:absolute;
top:0;
left:0;
z-index:-1000;
}

編集：実際には、スライダーが部分的に画面から外れているときに奇妙な効果が戻ってくるので、にtop:0置き換えると、そのコードはわずかにうまく機能します。bottom:0

于 2012-06-14T20:04:31.280 に答える