输入组插件在 Mozilla 浏览器上没有很好地对齐答案

【问题标题】：Input group addon not aligning well on the mozilla browser输入组插件在 Mozilla 浏览器上没有很好地对齐
【发布时间】：2018-03-13 13:59:28
【问题描述】：

我有下表：

<table class="neo-table">
  <tr>
    <td>Day of final discharge home</td>
    <td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
    <td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
  </tr>
  <tr>
    <td >Weight at final discharge</td>
    <td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td> 
  </tr>
  <tr>
    <td >Head circumference at final discharge</td>
    <td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td> 
  </tr>
  <tr>
    <td>Length at final discharge</td>
    <td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td> 
  </tr>
  <tr>
    <td>Enteral feeding at final discharge</td>
    <td>{{ form_widget(form.mHomeFeeding)}}</td> 
    <td></td>
  </tr>
</table>

在 chrome 浏览器上，它工作正常并显示如下：但是在 Mozilla 浏览器上，组插件没有正确对齐：

我尝试添加这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>

就像这篇文章中提到的： Input group addon alignment

但到目前为止，我无法弄清楚在哪里可以解决此问题。

编辑：这是问题的简化版本：

<table style="width: 100%";>
  <tr>
    <td>row1 col1</td>
    <td>row1 col2</td>
    <td>row1 col3</td>
  </tr>
  <tr>
    <td >row2 col1</td>
    <td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td> 
  </tr>
</table>

使用上面的代码，我在 mozilla 上得到以下结果：我希望“row2 col2”紧邻“row2col2” 这样做的方法是什么？

【问题讨论】：

你能发布呈现的 HTML 而不是模板小部件吗？
ZimSystem，我更新了帖子。这有助于理解问题吗？
Mozilla 支持 input-group-addon 吗？
那个版本的 Bootstrap 4 相当古老。你应该检查 4.0.0 稳定版本！

标签： css alignment bootstrap-4

【解决方案1】：

我通过用 div 包装输入组插件解决了这个问题，如下所示：它适用于 Chrome 和 Mozilla。

<table class="neo-table">
  <tr>
    <td>Day of final discharge home</td>
    <td>
        <div class="row" style='margin-bottom: 5px'>
        <div style='white-space: nowrap'> 
        <div class='col-xs-5'> 
          <div class='col-xs-2'>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</div>
        </div>
        </div>  
      </div>
  </td>
    <td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
  </tr>
  <tr>
    <td>Weight at final discharge</td>
    <td>   
        <div class="row" style='margin-bottom: 5px'>
            <div style='white-space: nowrap'>    
                <div class='col-xs-5'>
                    <div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div></div></div>
                </div>
            </div>
        </div>
    </td>
    <td></td>
  </tr> 
  <tr>
    <td>Head circumference at final discharge</td>
    <td>   
        <div class="row" style='margin-bottom: 5px'>
            <div style='white-space: nowrap'>    
                <div class='col-xs-5'>
                    <div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
                </div>
            </div>
        </div>
    </td>
    <td></td>
  </tr> 
  <tr>
    <td>Length at final discharge</td>
    <td>   
        <div class="row" style='margin-bottom: 5px'>
            <div style='white-space: nowrap'>    
                <div class='col-xs-5'>
                    <div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
                </div>
            </div>
        </div>
    </td>
    <td></td>
  </tr> 

    <tr>
    <td>Congenital malformation</td>
    <td>{{ form_widget(form.mBdefect)}}</td>
    <td colspan="3">{{ form_widget(form.mBdefectSpecific, {'attr':{'style':'width:250px'}})}}</td>
  </tr>
  <tr>
    <td>Enteral feeding at final discharge</td>
    <td>{{ form_widget(form.mHomeFeeding)}}</td> 
    <td></td>
  </tr>
</table>

【讨论】：