Internet Explorer lowers text inside element with odd height - html

Question

I have this element:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
Its height must be 17px, horizontal padding should be 4px and font size should be 12px. It looks like a prototype in Chrome and Firefox:
But there is a problem in Internet Explorer:
It lowers the text inside, it is not well aligned vertically. If I set line-height and width of element to 18px (as well as every other even value), everything is OK, but I need 17px. How to avoid text lowering in IE?

Answer 1

You can add a specific style for IE. You can try this:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE Edge 12+ CSS styles go here */
.counter {
display: inline-block;
min-width: 9px;
padding: 0px 4px 1px 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>