問題無いはずのfloatレイアウトがクライアントで崩れる

製作時に確認して問題無いはずのfloatを使った段組レイアウトが、お客様から崩れるといわれることがあります。
いわゆるfloat要素が下に落ちてしまうという現象。
計算上も間違っていないし、実際検証環境でもうまくfloatされているのになぜかなーと思ったら原因はお客様のブラウザでの表示倍率でした。

IE9の場合、歯車のアイコン→拡大で表示倍率を変えられます。
こういう機能は昔より進歩していて、レイアウトをほぼ維持したまま全体を均等に拡大・縮小してくれるんですね、最近のブラウザは。
それは便利で良いのですが、困るのは拡大・縮小した結果、ピクセル数に端数が出た場合。四捨五入か切り上げかはよく分かりませんが（調べるのも面倒ですが笑）、結局端数が出た場合は画面上は何らか補正が入るわけです。
で、ギリギリのサイズで作成されているfloatでの段組の場合、端数が切り上げられた場合、納まりきらずに下に落ちてしまうわけですね。考えてみれば当たり前のことではありますが。

拡大縮小は以前より使われている率が高いと感じます。（この手の問い合わせが多い為）
従って端数切り上げが発生しても崩れないよう、余白を持たせた段組にしておく必要があるということですね。
例えば2段組でfloat:leftとfloat:rightを使う場合、2つの段の間の余白はpaddingで指定せずに、どちらの段にも属さない余白として取っておくということです。


（余談１）
同じ原因で、画像同士にずれが生じる場合があります。
大きめの画像を背景にしいて、小さい画像をその上に乗せる場合。元々のサイズが異なるため、拡大縮小時の小数点の処理でずれます。
そうならないようにするには、きっちり1ピクセル単位で合わせる必要がある配置を止めるしかありません。背景の上に画像のボタンを載せるのであれば、ボタンの周囲１ピクセルはずれても大丈夫な余白にしておくなどすれば大丈夫です。

（余談２）
こういう現象は初代iPad、iPad2でも確認していました。
これらのサファリはそもそもページを100%で表示するという前提がなく、何もしなければ拡大・縮小された状態になります。
新しいiPadは解像度が高いせいか、端数が出たときのずれが気になったことはありません。floatが落ちるかどうかは実験したことはありませんが。