Twitter的引导网格不跨浏览器的工作均匀

Question

我在得到一个表，跨浏览器的统一显示使用Twitter的引导3

这里的HTML问题：

<div class="row"> 
    <div class="col-md-10 col-md-offset-1"> 
     <table class="table table-striped table-responsive first-table"> 
      <thead> 
       <tr> 
        <th>Ingredient</th> 
        <th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th> 
        <th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th> 
        <th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th> 
        <th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th> 
        <th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th> 
        <th></th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="formulaRow"> 
        <td> 
         <input type="text" class="ingredient required" name="ingredient"> 
        </td> 
      <div class="col-md-1"> 
       <td> 
        <div class="input-group"> 
         <input type="number" class="amount required small-input" name="amount" > 
         <div class="input-group-addon">mg</div> 
        </div> 

       </td> 
      </div> 
      <td> 
       <div class = "input-group"> 
        <input type="number" class="carrier required small-input" name="carrier" max="100"> 
        <div class="input-group-addon">%</div> 
       </div> 
       <p class="message">Only use numbers smaller than 100</p> 
      </td> 
      <td> 
       <div class="input-group"> 
        <div class="input-group-addon">$</div> 
        <input type="number" class="price required small-input" name="price" size="6"> 
        <div class="input-group-addon">.00</div> 
       </div> 
      </td> 
      <td> 
       <select class="tableDropDown" style="min-width: 100px;"> 
        <option value=true>The Manufacturer</option> 
        <option value=false>Me</option> 
       </select> 
      </td> 
      <td> 
       <div class="input-group"> 
        <input class="packSize small-input" type="number" size="8" disabled> 
        <div class="input-group-addon">kg</div> 
       </div> 
      </td> 
      <td> 
       <a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a> 
      </td> 
      <td> 
       <a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a> 
      </td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

您还可以看到在这里：www.healthkismet.com/formula-analyzer/

它的标题下显示表：“每份”

我想什么：对于它是均匀CENTE在屏幕上显示为红色，因此您不必滚动到右侧即可完成填写输入字段。

我的项目：它在Mozilla中正常工作。当我从计算机上的文件脱机查看时，它在Chrome中也可以正常工作。

但是，当我在线查看它时，它在Chrome和IE浏览器中流血。

我不确定为什么在Mozilla中有理想的效果，而不是其他两种。

最终目标是让它在所有可能（或接近它）的情况下居中对齐。

此外，这里有两个截图来演示我在说什么。

在Chrome，表不右边偏移，而是被推开窗外：

而在Firefox它证明正确：

Answer 1

你在一个div中包装一个表格单元格。我认为这打破了桌面，并且由不同的浏览器进行不同的处理。

尝试从去除<div class="col-md-1"></div>：

<tr class="formulaRow"> 
    <td> 
     <input type="text" class="ingredient required" name="ingredient"> 
    </td> 
<div class="col-md-1"> 
    <td> 
     <div class="input-group"> 
      <input type="number" class="amount required small-input" name="amount" > 
      <div class="input-group-addon">mg</div> 
     </div> 
    </td> 
</div> 
<td>...