1

我在里面使用一张桌子fieldset，图例下方有一个间隙，我想将其删除。我尝试使用padding:0pxandmargin:0px和fieldset图例内联样式。但没有一个奏效。请帮我一些建议。

谢谢！

编辑：

由于我使用的是选择菜单，因此代码非常庞大。但这里是代码的概述。

<fieldset>
          <legend><b>Options</b></legend>
          <table>
            <tr>
              <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>    
</fieldset>

边距和填充适用于字段集，但对图例没有任何作用。有什么办法可以消除传说产生的差距？

4

5 回答 5

2

根据Eric Meyer 的 reset，margin:0;并且padding:0;在 fieldset 和 legend 上都应该完成这项工作。

在小提琴中测试您的代码实际上可以工作，因此可能导致此问题的其他几件事是：

  1. 表格上设置的填充/边距/td
  2. 标签的行高/td
于 2012-09-23T09:54:18.217 回答
1

默认呈现可能包括旨在使文档外观清晰的填充。默认值因浏览器而异，但它们可能包括 和 上的垂直填充，fieldset并且legend几乎可以肯定包括td元素上的垂直填充。要删除此类填充，您可以设置：

legend { 
  padding-top: 0;
  padding-bottom: 0;
}
fieldset, td { 
  padding-top: 0;
}

但是默认情况下，表格单元格之间也有间距，这意味着即使在单单元格表格中，单元格周围也会有一些间距。跨浏览器的删除方法是：

table {
  border-collapse: collapse;
}

添加它会删除IE 和 Chrome 上的图例和单元格内容之间的间距（您可以通过在legend和元素上设置背景颜色来看到这一点）。label在 Firefox 上，一个像素的差距似乎仍然存在，没有明显的解释。

于 2012-09-23T17:31:26.027 回答
1

要删除标签下方的空间，请使用 margin-top: -ve px;

就像：

<fieldset> <legend><b>Options</b></legend> <table style="margin-top:-13px;"> <tr> <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>
</fieldset>

于 2015-06-16T11:55:15.883 回答
0

字段集和图例的浏览器格式在浏览器之间差异很大，但无论如何都是一团糟。

如果您的开始字段集标记和第一个标记之间有任何空格，firefox 将添加 BREAKS。传奇也一样。

绕过 itis 的最简单方法是删除标签之间的所有空格。

于 2015-07-02T21:40:25.227 回答
0

我也只是在与此作斗争，以便在字段集中使用绝对定位时在浏览器之间获得相同的行为。

我发现将 a 添加legend到 a时会发生fieldsetChrome 和 IE 会将字段集的顶部边框向下移动到文本的中间，但包含的元素仍然相对于字段集的原始顶部定位。但 Firefox 也会将包含的元素的顶部移动到图例下方。FF 还将在图例文本本身的上方和下方留出空间。

我终于能够通过添加这个 CSS 来克服它：

legend {
   line-height: 0;
}

然后在不移动顶部边框的情况下添加图例，并且在 Chrome、IE 和 FF 中的位置相同。

于 2017-04-28T14:57:57.537 回答