CSS 技巧的 First-of-type 和 Last-of-type 导致圆边在 IE11 中显得更短答案

【问题标题】：First-of-type and Last-of-type for CSS trick causes rounded edges to appear shorter in IE11CSS 技巧的 First-of-type 和 Last-of-type 导致圆边在 IE11 中显得更短
【发布时间】：2018-05-18 07:38:01
【问题描述】：

使用radio+label 技巧来制作单选按钮的自定义样式，至少在 Internet Explorer 11 (IE11) 中，first-of-type 和 last-of-type 看起来不同。根据显示的背景，第一个和最后一个的底部似乎被切断或缩短。如果我删除或注释掉所有 first-of-type 和 last-of-type 选择器，它会很好地显示默认的方形按钮。截图如下。

受影响的 CSS：

/* Trick for custom styling of radio buttons */
.spr-status [type="radio"] + label,
.spr-field  [type="radio"] + label {
  margin: 0 1px;
  padding: 2px 5px;
  font-size: 14px;
  color:#444;
  background-color:#EEE;
  cursor: pointer;
}

.spr-status [type="radio"] + label:first-of-type,
.spr-field  [type="radio"] + label:first-of-type {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.spr-status [type="radio"] + label:last-of-type,
.spr-field  [type="radio"] + label:last-of-type {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

外观：Chrome 和 Firefox 的当前版本：

它在 IE 中的外观（缩短类型的第一个和最后一个背景）：

不使用圆角与 first-of-type 和 last-of-type 时不会出现 IE11（或任何经过测试的浏览器）问题

【问题讨论】：

标签： css internet-explorer css-selectors cross-browser

【解决方案1】：

再次搜索这个方法，我发现我忘记在第一个选择器中显式输入display。

解决方法是添加display:inline-block，如下：

.spr-status [type="radio"] + label,
.spr-field  [type="radio"] + label {
  display:inline-block;
...

【讨论】：