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>...