css - 输入组插件在 mozilla 浏览器上没有很好地对齐

Question

我有下表:

<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” 有什么方法可以做到这一点？

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