1pxの垂直線が上手いこと表示されない

以下のように、３カラムの画像のまわりに枠線に表示するのに、一苦労しましたので、解決策をまとめておきたいと思います。

画像まわりに枠線の例

初めは画像に直接枠線を入れていたのですが、ウィンドウサイズによって、表示幅に小数点がつくため見た目が変わってくるという問題につまづきました。ウィンドウサイズを変更すると、垂線が消えたり太くなったりしていました。

最終たどり着いた方法

汎用性も考えて、cssで枠線を表示することにし、色々試しました。枠線の表示方法についてはこちら（枠線の表示手段まとめ）を参照してください。

今回、一番ズレる心配がなく、スマートだと思われる方法で、以下の方法をとりました。

カラム落ちを防ぐためにbox-sizing=”border-box”を設定するため、liにborderを設定すると、borderなしのliだけ、borderの幅分、box中身のサイズが変わってしまいます。

今回、枠の中に画像を表示する必要があった（box中身のサイズを３カラムとも同じにしたい）ため、上記の方法をとりました。