IE對齊問題

Question

我有一個在Chrome上對齊的div，但沒有Internet Explorer。由於我無法在此處嵌入圖像，因此可以鏈接到發生的事情。 https://www.dropbox.com/s/ymzt6y3zwm6mylf/ie%20gc.png

該元素的CSS是

.calculator-submodule { 
    float: left; 
    text-align: center; 
    padding-bottom: 10px; 
    padding-right: 25px; 
    font-size: 20px; 
    font-weight: 300; 
    } 

    .calculator-submodule #total { 
    padding-top: 42px; 
    } 

    .calculator-total { 
    display: inline-block; 
    padding-left:20px; 
    padding-top: 40px; 
    } 

和HTML

<div class="calculator"> 
    <div class="calculator-submodule input-group"> 
    <h4>Adult (12+)</h4> 
    <button class="btn theme-btn" id="decrease" value="Decrease Value" >-</button> 
    <input type="text" id="adult" value="1" class="form-control input-usmall" min="0" disabled> 
    <button class="btn theme-btn" id="increase" value="Increase Value" >+</button> 
    </div> 
    <div class="calculator-submodule input-group"> 
    <h4>Child (2-11)</h4> 
    <button class="btn theme-btn" id="decreasec" value="Decrease Value" >-</button> 
    <input type="text" id="child" value="0" class="form-control input-usmall" min="0" disabled> 
    <button class="btn theme-btn" id="increasec" value="Increase Value" >+</button> 
</div> 

<div class="calculator-submodule"> 
    <div id="total"> 
    <span class="pound">£</span> 
    <span id="total">39</span><span class="pound">.00</span> 
    </div> 
</div> 

Answer 1

對於使用IE8下就可以使一個只有IE瀏覽器的樣式表。用途：

display: inline; 

相反的：

display: inline-block;