不尋常的表單HTML或瀏覽器問題？

Question

我遇到了一個問題，與我測試過的其他瀏覽器相比，Firefox有更大的利潤空間（用FF5/win，FF6/win，FF5/mac進行測試）。 （IE9/win，Chrome/win，Opera/win，Safari/win，Safari/mac）。不可否認，HTML是不尋常的，我連續有5個表單，但是我找不到任何有關這個想法的文檔化問題，或者任何有關它的警告。

下面是代碼：

HTML

<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;"> 
    <span style="color: #514536; font-weight: bold;">Search By Destination:</span><br /> 
    <div id="regions" style="margin-top: 5px;"> 
     <form action="/view-the-collection/" method="post"> 
      <input type="hidden" id="dest" name="dest" value="Caribbean" /> 
      <input type="hidden" id="search" name="search" value="1" /> 
      <button class="imgbtn" type="submit"> 
       <img src="https://stackoverflow.com/a/i/pe_carrib_region.jpg" alt="Caribbean" /> 
      </button> 
     </form> 
     <form action="/view-the-collection/" method="post"> 
      <input type="hidden" id="dest" name="dest" value="Mexico" /> 
      <input type="hidden" id="search" name="search" value="1" /> 
      <button class="imgbtn" type="submit"> 
       <img src="https://stackoverflow.com/a/i/pe_mexico_region.jpg" alt="Mexico" /> 
      </button> 
     </form> 
     <form action="/view-the-collection/" method="post"> 
      <input type="hidden" id="dest" name="dest" value="Thailand" /> 
      <input type="hidden" id="search" name="search" value="1" /> 
      <button class="imgbtn" type="submit"> 
       <img src="https://stackoverflow.com/a/i/pe_thailand_region.jpg" alt="Thailand" /> 
      </button> 
     </form> 
     <form action="/view-the-collection/" method="post"> 
      <input type="hidden" id="dest" name="dest" value="Southern US" /> 
      <input type="hidden" id="search" name="search" value="1" /> 
      <button class="imgbtn" type="submit"> 
       <img src="https://stackoverflow.com/a/i/pe_southus_region.jpg" alt="Southern US" /> 
      </button> 
     </form>      
     <form action="/view-the-collection/" method="post" style="margin-right: 0px;"> 
      <input type="hidden" id="dest" name="dest" value="Mustique" /> 
      <input type="hidden" id="search" name="search" value="1" /> 
      <button class="imgbtn" type="submit"> 
       <img src="https://stackoverflow.com/a/i/pe_mustique_region.jpg" alt="Mustique" /> 
      </button> 
     </form> 
    </div> 
</div><br style="clear: both;" /> 

CSS

#container #regions form { 
    float: left; 
    margin: 0px 14px 13px 0px; 
    padding: 0px; 
} 

對於大多數瀏覽器，它呈現這樣的：

除了在Firefox中，它看起來像：

我確信從每個元素在每一種形式去除填充和利潤，並且它沒有任何效果。我不能爲我的生活弄清楚是什麼導致了這一點，無論是瀏覽器不兼容，還是我編碼完全不符合要求。任何人都可以建議嗎？

在此先感謝。

Answer 1

繼承人修復。不要爲表單添加邊距，只需將寬度設置爲97px，然後將按鈕/圖像對齊到左側！

Answer 2

最有可能是瀏覽器兼容性問題。我建議你使用像CSS5重置的HTML5 Boilerplate：http://html5boilerplate.com/

Answer 3

額外的空間看起來足夠寬，可以是字間空格。如果嘗試刪除HTML標籤之間的所有空格（即在<form>之間以及每個表單的各個部分之間），它會消失嗎？