Необычная форма 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

Heres a fix. Вместо добавления полей в формы просто установите их ширину на 97px каждый и выровняйте кнопки/изображения слева!

Answer 2

Скорее всего проблема совместимости с браузером. Я бы предложил вам использовать CSS-сброс, например, HTML5-котел: http://html5boilerplate.com/

Answer 3

Дополнительное пространство выглядит достаточно широко, чтобы быть межсловными пространствами. Уходит ли это, если вы попытаетесь отбросить все пробелы между вашими HTML-тегами (т. Е. Между <form> и между различными частями каждой формы)?