CSS line-height在移动设备上很常见

Question

我有一个包含一些文字的div，其中包含具有背景/边框效果的单个字母，如屏幕截图所示：

父div和单个数字的行高均为1.请参阅下面的CSS：

.jobcount {
    font-weight: 300;
    line-height: 1 !important;
    -webkit-text-size-adjust: none;
    vertical-align: top;
    margin: 0 0 25px 0;
    overflow: hidden;

    b {
        line-height: 1;
        padding: 3px 4px 2px 4px;
        -webkit-text-size-adjust: none;
        font-weight: normal;
        display: inline-block;
        margin-right: 2px;
        border-radius: 2px;
        background: #A4CD39;
        position: relative;
        color: #016699;

        &:before {
            opacity: 0.2;
            border-top: 1px solid #016699;
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            margin: 0 auto;
        }
    }
}

在移动iOS和Android上（在Android上不太明显，但仍然存在），数字下方还有额外的空间，导致背景延伸到所需的位置以下。有关它应该如何显示的示例（以及在所有4个桌面浏览器上都有），请参阅：

我在移动浏览器上缺少什么导致行高不同？

Answer 1

许多粗体字体的指标与非粗体字体的指标略有不同。因此，一种解决方案是找到高度相同的粗体字体。

或者，正如David Millar在评论中提到的那样，为b元素指定一个高度。如果你这样做，请确保你也给它display:inline-block，否则高度将被忽略。