我有这个元素:
.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>
它的高度必须是 17px,水平填充应该是 4px,字体大小应该是 12px。它看起来像是 Chrome 和 Firefox 中的原型(prototype):
但是在 Internet Explorer 中有一个问题:
它降低了里面的文本,它没有很好地垂直对齐。如果我将元素的行高和宽度设置为 18px(以及所有其他偶数值),一切正常,但我需要 17px。如何避免在 IE 中降低文本?
最佳答案
您可以为 IE 添加特定的样式。你可以试试这个:
.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>
关于html - Internet Explorer 降低元素内具有奇数高度的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47634694/