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="/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;
}

对于大多数浏览器，它呈现如下：

enter image description here

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

enter image description here

我已确保从每个表单中的每个元素中删除填充和边距，但它没有任何效果。我不能为我的生活找出造成这种情况的原因，无论是浏览器不兼容，还是我编码的内容完全脱节。有人可以建议吗？

提前致谢。

Answer 1

这是一个修复。而不是向表单添加边距，只需将其宽度设置为97px，并将按钮/图像对齐到左边!!

Answer 2

很可能是浏览器兼容性问题。我建议你使用像CSS5 Boilerplate这样的CSS重置：http://html5boilerplate.com/

Answer 3

额外的空间看起来宽度足以成为词间空间。如果你试图剔除HTML标签之间的所有空格（即在<form>之间和每个表单的各个部分之间），它会消失吗？

Answer 4

您可以使用名为Formalize CSS - Teach your forms some manners!的非常好且引用良好的css包来使您的html表单元素具有跨浏览器和跨操作系统兼容性的外观。

不寻常的HTML格式或浏览器问题？

4 个答案: