響應式圖像中的奇怪填充

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