奇怪的绝对定位CSS问题

Question

我一直有这个绝对定位的CSS问题。

IE 10+工作正常，但Chrome会变形，如下图所示：

请帮助。

（这种失真似乎已经开始使用chrome 52 update ）

IE

铬

HTML

<div class="widget style1 navy-bg">
    <div class="row">
        <div class="col-xs-6 text-left">
            <h4>New Contacts</h4>
            <h2 class="font-bold">707</h2>
            <div class="speed_l">
                <h2>39</h2>
                <small>/hr</small>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <h4>Visitors Today</h4>
            <h2 class="font-bold">2129</h2>
            <div class="speed_r">
                <h2>387</h2>
                <small>/hr</small>
            </div>
        </div>
    </div>
</div>

CSS

.widget {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}

    .widget.style1 h2 {
        font-size: 40px;
    }

    .widget h2,
    .widget h3 {
        margin-top: 5px;
        margin-bottom: 0;
    }

    .speed_l {
        display: inline-flex;
        padding-left: 15px;
        margin-top: 5px;
    }

        .speed_l small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_l h2 {
            font-size: 30px !important;
        }

    .speed_r {
        display: inline-flex;
        padding-right: 12px;
        margin-top: 5px;
    }

        .speed_r small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_r h2 {
            font-size: 30px !important;
        }

应用建议的解决方案后

Answer 1

也许这就是你想要的：

我已经更新了代码。

.speed_l {

    display: inline-flex;
    padding-left: 15px;
    margin-top: 5px;
}

    .speed_l small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }

    .speed_l h2 {
        font-size: 30px !important;
    }

.speed_r {
    display: inline-flex;
    padding-right: 12px;
    margin-top: 5px;
}

    .speed_r small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }