1

オンライン教育 Web サイト用に、チャプターとチャプター セグメントに分割された柔軟なプログレス バーを作成しました。プロジェクトはレスポンシブになるため、最新のブラウザーでは柔軟である必要があります。

ここにフィドルがあります：http://jsfiddle.net/zyCkW/7/

私が達成したかったのは、チャプター リスト要素が 0 ピクセル幅で折りたたまれ、子<li>要素 (チャプター セグメント) が #progressbar 全体の特定の割合を使用して左にフロートすることです。チャプター<li>要素もフロートさせるか、25% の幅を与えると、セグメントは #progressbar の幅を使用せず、はるかに小さくなります。

問題：

私が書いたものは、IE7-9、Firefox、および Opera では非常にうまく機能しますが、残念ながら Webkit ブラウザー (Chrome/Safari) では機能しません。Webkit は、それを正しく処理する唯一のブラウザーだと思います... 他のブラウザーの結果に感謝しても.

これをWebkitで修正できる解決策はありますか?Javascriptを使用しないのが最善ですか?

4

1 に答える 1

0

:nth-child疑似セレクターを使用してチャプターの説明を配置することで、うまく解決できませんでした。

#progressbar ol>li:nth-child(2) span { left: 23.076%; }
#progressbar ol>li:nth-child(3) span { left: 53.844%; }
#progressbar ol>li:nth-child(4) span { left: 76.92%; }

可能であれば、より良い解決策をいただければ幸いです。

于 2012-09-13T08:17:20.630 に答える