响应式图像中的奇怪填充

Question

我尝试使用浮动文本实现bilboard。见截图，请：

所以，我写了这样的代码：

<div class="bilboard hcenter"> 
<div class="content"> 
    <div class="imwrap"><img src="img/dog.png" /></div> 
    <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
    <span>YOU KNOW AND LOVE</span> 
</div> 

和CSS：

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    width: auto; 
    height: 100%; 
    float: right;} 

.bilboard .imwrap { 
    float: right; 
    height: 100%; 
    background-color: yellow; 
} 

如果我调整我的HTML在firefox和IE中我看到这个奇怪的黄色填充在狗的左：

在Chrome中一切都很好。

这是什么和我错了？ 或者，也许我的方式是愚蠢的，代码是最简单的？有人可以帮我编码吗？

黄色只是表示问题。 imwrap块有更大的宽度比img

Answer 1

通读你的问题，我认为这可能是由于设置高度。我已经在下面的JSFiddle中测试过了，似乎工作正常。

HTML

<div class="bilboard hcenter"> 
    <div class="content"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Bon_toutou.png"/> 
     <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
     <span>YOU KNOW AND LOVE</span> 
    </div> 
</div> 

CSS

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    max-height: 100%; 
    width: auto; 
    float: right; 
    background-color: yellow; 
} 

JSFiddle