twitter-bootstrap - IE 11 中的 css 表格单元格不必要的填充

Question

我有一张小 table ，Internet Explorer 11 为单元格添加了填充，因此孔表比 chrome 或 firefox 中的要大。

有人知道为什么会这样吗？我正在使用 bootstrap 3。

举个例子: https://plnkr.co/edit/cX8N9eLjVTR93nYyaLTN?p=preview

<div class="container">
  <table class="table">
    <tr>
        <td width="25px">
            <button class="btn btn-sm btn-default">+</button>
        </td>
        <td>
            <input style="width: 100%" type="range" >
        </td>
        <td width="25px">
           <button class="btn btn-sm btn-default">-</button>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <small class="pull-left">24,0 °C</small>
            <small class="pull-right">31,1 °C</small>
        </td>
    </tr>
</table>

IE 11:

和 Chrome :

Answer 1

IE 在 <input> 上增加了填充比 Chrome 是什么。 Chrome 在顶部和底部都放置了 8px 的填充，IE 在顶部放置了 17px，在底部放置了 32px。设置输入的填充，使其在浏览器中保持一致，您应该已经准备就绪。