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;