CSS 技巧的第一个类型和最后一个类型导致圆边在 IE11 中显得更短

Question

使用 radio+label 技巧来制作单选按钮的自定义样式，第一个类型和最后一个类型至少在 Internet Explorer 11 (IE11) 中看起来不同。根据显示的背景，第一张和最后一张的底部似乎被切断或缩短了。如果我删除或注释掉所有 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 中的外观（第一个和最后一个类型的背景缩短）：

当不使用带第一个类型和最后一个类型的圆角时，IE11（或任何经过测试的浏览器）没有问题

Answer 1

再次搜索此方法时，我注意到我忘记在第一个选择器中明确放置 display。

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

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

CSS 技巧的第一个类型和最后一个类型导致圆边在 IE11 中显得更短

First-of-type and Last-of-type for CSS trick causes rounded edges to appear shorter in IE11

css

internet-explorer

cross-browser

css-selectors