css - 得到CSS重置后的边框

Question

许多CSS 重置消除了 <fieldset> 标记的边框、填充和边距。我想这是为了确保它们在所有浏览器中均匀呈现。但是，字段集在重置后不再在视觉上分隔 HTML（表单）元素组。

两个问题：

1. 浏览器是否真的以不同的方式呈现 <fieldset> 无重置？

2. 在 CSS 重置后获得“边框”外观的最佳方法是什么？像这样简单地重新设计它：

   fieldset {
       border: 1px solid silver;
       margin: 2px;
       padding: 7px;
   }
   

我正在描述的一些图像：

不重置：

带复位：

Answer 1

简单的答案是：不要使用重置！如果您知道自己在做什么，它们是不必要的。

例如，如果您使用重置，那么您将丢失任何本机 UI 样式，例如在本例中的字段集。例如，在 IE 中，无样式的字段集将有一个带有略微圆角的边框，就像本机程序中的字段集一样。重置会删除它，并且非本机 UI 很糟糕。

但是，如果您坚持，只需确保以正确的顺序定义样式即可。重置应该是绝对的第一件事，然后是“取消重置”。看，是多余的！

Answer 2

我有类似的问题 - 我做了什么，我从Normalize.css复制了样式，在 css 重置后粘贴了这个

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}