Как ul/li может иметь динамическую высоту?

Question

Это похоже на базовые знания CSS, поэтому почти неловко спрашивать.
Но почему мое масштабирование ul/li не используется, когда я использую большой шрифт? Я использую jQuery Mobile, но я не думаю, что это переопределяет мой css.

See my fiddle here.

Я попытался использовать inline-block, height: 100% на моей ul/li - но все равно получаю те же результаты.

// HTML 
<ui class="stats box-wrapper ui-corner-all"> 
    <li> 
     <div class="number num-stores">7</div> 
     <div class="">Stores</div> 
    </li> 
    <li> 
     <div class="number num-brands">99</div> 
     <div class="">Brands</div> 
    </li> 
</ui> 

// CSS 
.box-wrapper{ 
    display: inline-table; 
    position: relative; 
    border: solid 1px @supp-gray2; 
    background-color: #C9DDE0; 
    margin: 40px; 
} 

li { 
    display: table-cell; 
    padding: 5px 10px; 
    float: left; 
    text-align: center; 
    line-height: 20px; 
} 

.number { 
    font-size: 3.6em; 
} 
// More css over at jsFiddle 

Answer 1

Необходимо удалить line-height.

li { 
    line-height: 20px; 
} 

Fiddle: http://jsfiddle.net/ar2dm6h5/4/

Answer 2

Атрибут line-height наследуется от li до .number. Добавьте это:

.number { 
    line-height: normal; 
}