スライスで切った画像と画像の間に、なぜか隙間が空く

スライスで切った画像をつなげたり重ねたりしているレイアウトにおいて、お客様からこんな風に言われることがあります。

「画像がすこしずれている」
「画像と画像の間に白い線（隙間・余白）が入る」

一続きになっているデザインの画像を、スライスしてきっちり並べているはずなのに、環境によって画像の間に隙間が入ってしまって汚い、読めない、などの現象が発生することがあります。
たちが悪いのは、製作環境でなかなか再現しないこと。

私もお客様にHTML形式のメールマガジンで、（昔ながらの）table組みできっちり並べたはずの画像の間に白線が入るといわれ、ブラウザやOSを聞いたりして確認したのですが、どうしても再現せずに困ったのですよね。。。

で、先日原因が判明しました。
Dreamweaverのせいではなく、CSSやHTMLの誤記でもなく、単にブラウザの表示設定が100%でなかったこと、でした。（泣）

Windowsの場合、ブラウザの上にマウスカーソルがある時に、ctrlを押しながらホイールを回すとブラウザの表示比率設定がだいたいのブラウザで変わります。
Macのノートなんかは、トラックパッドで二本指操作で、縮めたり拡大したりすることができます。
意図的にやっている場合は良いんですけど、これが無意識のうちにやってしまうことがあるんですね。

で、例えば縦幅が100ピクセルの画像を90%で表示すれば90ピクセルで割り切れますけど、101ピクセルだと小数点が出てしまう。
ピクセルは表示の最小単位なので小数点はまずいですからブラウザが補正するんですが、この弊害で隙間ができてしまうことがあるのですね。


これはなかなかに解決しづらい問題なので、表示比率を100%に戻してもらって、OKがでれば良いですが、「ユーザーの中にも同様の現象が起こる可能性があるから対応したい」とか言われると面倒です。

table組みの場合は、中に入っている画像のサイズと同じ大きさの指定をtdに入れることで解決できるようです。
（少なくとも私の場合は大丈夫でした）
divなど他の要素で囲っている場合も、まずはサイズ指定を明示的に合わせてみてどうか、というところでしょうか。

やれやれ。