异常表单HTML，还是浏览器问题？

我在Firefox（使用FF5/win、FF6/win、FF5/mac测试）上遇到了一个问题，它比我测试过的任何其他浏览器都有更大的利润空间。（IE9/win、Chrome/win、Opera/win、Safari/win、Safari/mac）

诚然，HTML是不寻常的，我一行有5个表单，但我找不到任何关于这个想法的文档问题，或者任何针对它的警告

代码如下：

HTML

对于大多数浏览器，其呈现方式如下：

除了Firefox，它看起来像：

我已经确保删除了这些表单中每个元素的填充和边距，但没有效果。我一辈子都搞不清楚是什么导致了这种情况，是浏览器不兼容，还是我编写的代码完全不符合要求。有人能提供建议吗

---

---

提前感谢。

很可能是浏览器兼容性问题。我建议您使用类似HTML5样板的CSS重置：

很可能是浏览器兼容性问题。我建议您使用类似HTML5样板的CSS重置：

额外的空间看起来刚好足够宽，可以作为单词间空间。如果您尝试剔除HTML标记之间的所有空白（即

之间以及每个表单的各个部分之间），它会消失吗？

额外的空间看起来刚好足够宽，可以成为单词间的空间。如果您尝试剔除HTML标记之间的所有空白（即

之间以及每个表单的各个部分之间），它会消失吗。不要在表单中添加边距，只需将其宽度设置为

97px

每个，并将按钮/图像向左对齐

这里有一个解决方案。不要在表单中添加边距，只需将其宽度设置为

97px

每个，并将按钮/图像向左对齐

您可以使用一个非常好且引用良好的css包，名为，使html表单元素的外观和感觉跨浏览器和跨操作系统兼容

您可以使用一个非常好且引用良好的css包，名为，使html表单元素的外观和感觉跨浏览器和跨操作系统兼容

如果不使用边距，只在右侧添加填充，会发生什么情况？是否可以在右侧重现问题？我想我知道问题出在哪里了，但我需要测试一下以确认我的直觉。什么版本的Firefox？@Jonah Katz-我现在就试试。是的，拥有多个重复的

id

属性肯定会把你拖下水。这需要尽快解决。@DaveL:我正在看一看：这似乎很奇怪。除非有人比我强，否则你可以指望我回答这个问题，或者留下一条评论告诉你我无法计算：）如果你不使用边距，而是在右边添加填充，会发生什么？你能在上面重现这个问题吗？我想我知道问题出在哪里了，但我需要测试一下以确认我的直觉。什么版本的Firefox？@Jonah Katz-我现在就试试。是的，拥有多个重复的

id

属性肯定会把你拖下水。这需要尽快解决。@DaveL:我正在看一看：这似乎很奇怪。除非有人击败我，否则你可以指望我回答这个问题，或者留下评论告诉你我无法解决：）感谢你的建议，但网站的开发已经足够长了，而且时间/预算非常有限，我想把这作为最后的手段。我投了赞成票，因为CSS重置可能会解决这个问题。@DaveL谢谢。您是否尝试过使用较旧/较新的Firefox版本检查您的网站？感谢您的建议，但该网站的开发已经足够长了，而且时间/预算非常有限，我想将此作为最后手段。放弃投票，因为CSS重置可能会解决此问题。@DaveL谢谢。你有没有尝试过用旧/新的Firefox版本检查你的网站？有趣的想法！我看到空白会导致问题，特别是在标记方面，所以我修改了这里显示的HTML，使其全部位于一行，标记之间没有空格，不幸的是，它没有帮助。尽管如此，我还是投了赞成票，因为我自己也不会想到这一点。这个想法很有趣！我看到空白会导致问题，特别是在标记方面，所以我修改了这里显示的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;" />

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