去哪儿 m 版酒店价格获取，如何通过 css 计算元素的绝对定位

去哪儿价格返回的是 html ，通过 css 定位，显示出价格。

<div class="qt-light-orange qt-font20 qunar_mix">
      <span class="price" style="width:33px">
      <i class="qm18d6dd7e">2</i> 
      <i class="qmacf0943b">2</i> 
      <i class="qm11251921">2</i> 
      <i class="qm5c6d111c">5</i> 
      <i class="qmbd09efa2">8</i></span>
    </div>

css 如下：

.qunar_mix span.price i {
    position: absolute;
    left: 0;
    bottom: -1px;
    font-style: normal;
    background: #f0f0f0;
    height: 100%;
}
.qunar_mix span.price i.qm5c6d111c{left: -100px; margin-left:300px;background:none;}
.qunar_mix span.price i.qmcf5711c8{left: -100px; margin-left:22px; padding-left:22px; background:none;}
.qunar_mix span.price i.qmbd09efa2{left: 0px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qm18d6dd7e{left: -33px; margin-left:11px; padding-left:33px; background:none;}
.qunar_mix span.price i.qm11251921{left: -22px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmca340bd1{left: 11px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmc1c11156{left: 11px; margin-left:22px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmacf0943b{left: -100px; padding-left:300px;background:none;}

最终显示的价格是 228 ，如何通过 css 来计算得到的价格呢。能想到的就是通过 phantomjs 渲染后截图，然后图片识别可以，但是效率不高