CSS line-height 在移动设备上是 fubar

Question

我有一个 div 包含一些文本 dividual 字母具有 background/border 效果，如屏幕截图所示：

父 div 和 indiv 等号的 line-height 均为 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 上不太明显，但仍然存在）数字下方有额外的 space，导致背景扩展在需要的地方下方。有关它应该如何显示的示例（以及在所有 4 种桌面浏览器上的显示方式），请参阅：

我在导致行高不同的移动浏览器上遗漏了什么？

Answer 1

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

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

CSS line-height 在移动设备上是 fubar

CSS line-height is fubar on mobile devices

css

mobile-safari