When using the radio+label trick to style radio buttons, a peculiar issue arises in Internet Explorer 11 (IE11). The first and last buttons in each set appear to have their bottom parts cut off or shortened, depending on the background displayed. Removing or commenting out the first-of-type and last-of-type selectors resolves this problem, showing default square buttons as expected. Screenshots provided below.
The affected CSS code:
/* 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;
}
Expected appearance in current versions of Chrome & Firefox: https://i.stack.imgur.com/BYeSt.png
Actual appearance in IE (background cut off on first and last items): https://i.stack.imgur.com/yXPmb.png
No issues observed in IE11 (or any other tested browser) when rounded corners with first-of-type and last-of-type aren't utilized. https://i.stack.imgur.com/13f6P.png