Css 字段集中的引导第一个图例-在某些浏览器中不存在间距

除了这个问题，我正在使用bootstrap，并且在所有浏览器和设备上都获得了很好的一致性。我刚刚用Safari和Chrome在iPad1上测试了我们的客户详细信息表单，得到了同样的问题，我无法在其他地方复制。图例和第一个表格组之间的间距在哪里

我还有另外两个图例在表单的下方，div/inputs之后立即有一个很好的边距

为了证明总是第一个图例导致了问题，我简单地复制了图例标记（第二个屏幕截图）和hey presto，第二个图例和表单组之间的间距非常精确

我无法解释

<form class="form-horizontal" role="form" id="customer-form" action="#" method="get">
            <fieldset>
                <legend>To Purchase, Please Enter Your Personal Customer Details</legend>             


                <div class="form-group">
                    <label for="customer_title" class="col-sm-4 control-label">Title *</label>
                    <div class="col-sm-8">
                        <select name="customer_title" id="customer_title" class="form-control">
                          <option></option>
                          <option value="Mr">Mr. </option>
                          <option value="Mrs">Mrs. </option>
                          <option value="Miss">Miss. </option>
                          <option value="Ms">Ms. </option>
                          <option value="Dr">Dr. </option>
                          <option value="Rev">Rev. </option>
                        </select>
                    </div>
                </div>

要购买，请输入您的个人客户详细信息
头衔*
先生
夫人
错过。
太太
博士
牧师。

工作解决方案：

.hack legend {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.hack legend:after {
    display: block;
    height: 20px; /* @baseLineHeight; */
    border-top: 1px solid #e5e5e5;
    content: "";
  }

另一种可能的解决方法在本例中不起作用：

form.form-horizontal > fieldset {
  & > legend {
    margin-bottom: 0;
  }
  & > div.form-group:first-of-type > * {
    margin-top : 20px;
  }
}

---

参考资料：

我正在使用“引导”-您能提供更多详细信息吗？也许你指的是twitter的bootstrap或其他第三方框架？bootstrap.min.css-*bootstrap v3.1.1（），我无法复制错误，chrome emulation for ipad1没有出现这个问题，从这里开始测试：检查这个：-感谢你帮我看这个！你有没有在你的头上加上：啊？也可以在不使用字段集的情况下进行尝试，例如使用div进行测试