爲什麼圖像在Chrome中縮放而不是在Firefox或safari中移動位置

Question

我的圖像放在左邊一個和右邊兩個。當我調整瀏覽器窗口的大小時，圖像會縮放。

我遇到的問題是，在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> 

Answer 1

只要改變圖像寬度3 從50％到49％ ....

#img3 { 
width:49%; 
} 

工作實施例here

Answer 2

圖像寬度改變到49％給出了一些難看的間隙，但我並終於制定出一個解決方案。

這似乎是它是「明確：既」 CSS正在發送鉻瘋狂，所以我重新排序的元素和消除對clear屬性的需求，現在它工作。

如果任何人都可以提供一個原因，爲什麼我的原始代碼不能在鉻中工作，我很想知道。

http://jsfiddle.net/AC5BJ/1/

#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%; 
    float:left; 
} 

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