3

クライアントのモバイルサイトで作業していますが、スライドショーの方法に問題があります。これは次のとおりです。

  • 幅100%、オーバーフロー:非表示、位置:相対のラッピングコンテナ

  • このコンテナ内のulの幅は(#children * 100)%、position:relative

  • 幅が(100 /#li)%の可変数のlis、左にフロート、それぞれ幅:100%の画像が含まれています

  • 反復ごとに、ulの「left」プロパティが100%デクリメントされます

この方法は、デスクトップブラウザとモバイルサファリでうまく機能しますが、Androidブラウザはフロートのパーセンテージを適切に処理せず、正しくレンダリングされません。確かに知る方法はありませんが、100/6 = 16.66666667%の幅をliに適用すると、16%としてレンダリングされているように見えますが、javascriptを介してその要素の幅をクエリすると、通常の切り捨てられた値が返されます16.6667%の幅。その結果、スライドショーを繰り返すたびに、画像がラッピングコンテナ内の適切なスペースを占めていないため、画像が左に向かって中心から外れるようになります。

興味深いことに、要素の数を100を均等に分割する数、たとえば100/5 = 20%に減らすと、この問題は完全に解消されます。

ピクセルの丸めに関する以前のスレッドを調べましたが、それは問題ではないと思います。私が収集したところによると、ピクセルの計算に余りがあり、ブラウザが結果を最も近いピクセルに丸める必要がある場合にピクセルの丸めが発生します。これは、ブラウザが小数のパーセンテージを理解していない問題のようです。

他の誰かがこのような問題に遭遇しましたか?

4

1 に答える 1

0

多くのブラウザは、パーセンテージの端数を適切に処理しません:

http://www.sitepoint.com/forums/showthread.php?547308-CSS-percentage-width-roundoff

于 2012-09-14T17:11:08.050 に答える