html - クロムではスケーリング中に画像の位置が移動するのに、Firefox や Safari では移動しないのはなぜですか

Question

左側に 1 つ、右側に 2 つの画像を配置しています。ブラウザ ウィンドウのサイズを変更すると、画像が拡大縮小されます。

私が抱えている問題は、Safari と Firefox では画像が正しくスケーリングされ、位置が維持されることですが、Chrome ではブラウザーのサイズを変更すると画像の位置が変化します。

問題を示すjsfiddleの例を次に示します。

http://jsfiddle.net/sSZFA/6/

また、コードのコピー:

        #col1{
           width:50%;
           float:left; 
        }

        #col2{
           width:50%;
           float:left; 
        }

        #img1{
           width:50%;
           float:right;
           clear:both;
        }

        #img2{
           width:50%;
           float:right;
           clear:both;
        }

        #img3{
           width:50%;
        }
    ​

            <div id="col1">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
    </div>
    <div id="col2">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>

</p>

Answer 1

画像 3 の幅を50% から 49% に変更するだけで....

#img3 {
width:49%;
}

作業例はこちら