Необычная форма HTML или проблема браузера?

Question

У меня проблема с Firefox (протестировано с FF5 / win, FF6 / win, FF5 / mac) с более широкими полями, чем у любого другого браузера, который я тестировал. (IE9 / победа, Chrome / победа, Opera / победа, Safari / победа, 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="/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="/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="/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="/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="/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

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

Answer 3

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

Answer 4

Вы можете использовать очень хороший и хорошо упоминаемый пакет css под названием Формализовать CSS - Обучите свои формы некоторым манерам! чтобы внешний вид и ощущение ваших элементов формы HTML пересекали браузер и перекрестная совместимость.