seltsame absolute Positionierung CSS-Probleme

Question

Ich habe diese absolute Positionierung CSS-Problem.

IE 10+ funktioniert nur gut, aber Chrome verzerrt wird, wie unten in den Bildern gezeigt:

Jede Hilfe bitte.

(diese Verzerrung scheint mit Chrom-52-Update begonnen zu haben)

IE

Chrome

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; 
     } 

Nach vorgeschlagen Anwenden Lösung

Answer 1

Vielleicht ist das, was Sie wollen:

Ich habe den Code aktualisiert.

.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; 
    }