为什么图像在 chrome 中缩放时移动位置，但在 firefox 或 safari 中却没有答案

【问题标题】：Why do images move position while scaling in chrome but not in firefox or safari为什么图像在 chrome 中缩放时移动位置，但在 firefox 或 safari 中却没有
【发布时间】：2012-11-09 18:47:22
【问题描述】：

我放置了一张图片，一张在左边，两张在右边。当我调整浏览器窗口的大小时，图像会缩放。

我遇到的问题是，在 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>

【问题讨论】：

标签： html css firefox google-chrome safari

【解决方案1】：

只需将图像 3 的宽度 从 50% 更改为 49% ....

#img3 {
width:49%;
}

工作示例here

【讨论】：

【解决方案2】：

将图像宽度更改为 49% 会产生一些难看的差距，但我终于找到了解决方案。

似乎是“clear:both”css 让 chrome 发疯了，所以我重新排序了元素并删除了对 clear 属性的需求，现在它可以工作了。

如果有人能提供我的原始代码在 chrome 中无法运行的原因，我很想知道。

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>

【讨论】：