Display Flex在Firefox上不起作用，但在Chrome上起作用

Question

我有一个简单的容器，该容器在表旁边包含一个a标记。我要做的就是将它们彼此对齐。在Chrome上可以正常工作，但在Firefox上却不能正常工作。

#fluidDescription_subContainer {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: white;
}

#fluidDescriptions_table[name="sav"] {
  font-size: 12px;
  text-align: left;
  margin-bottom: 0px;
  flex: 3;
}

#sav_fluid_extra_button {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;
  cursor: pointer;
  border-left: 2px solid #f4f4f4;
  text-decoration: none;
}

<div id="fluidDescription_subContainer" style="">
  <table name="sav" style="" id="fluidDescriptions_table" class="table">
    <tbody id="fluidDescriptions_tbody">
      <tr style="border-bottom: 1px solid #f4f4f4">
        <td id="fluidDescriptions_controlFunction">Typ 2.3</td>
      </tr>
      <tr style="border-bottom: 1px solid #f4f4f4">
        <td id="fluidDescriptions_steuerung">GAZ-7</td>
      </tr>
      <tr>
        <td>aaa</td>
      </tr>
      <tr>
        <td>bbb</td>
      </tr>
      <tr>
        <td>ccc</td>
      </tr>
    </tbody>
  </table>
  <a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">
    <b>Fluid-Plan</b>
    <i class="fa fa-file-pdf-o fa-5x"></i>
  </a>
</div>

在Mozilla Firefox上，表格似乎与a标记重叠。

以下是链接：http://jsfiddle.net/aq9Laaew/168135/

Answer 1

您可以通过将table包裹在另一个div中来解决此问题：

#fluidDescription_subContainer {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: white;
}

#tableWrapper {
  flex: 3;
}

#fluidDescriptions_table[name="sav"] {
  font-size: 12px;
  text-align: left;
  margin-bottom: 0px;
}

#sav_fluid_extra_button {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;
  cursor: pointer;
  border-left: 2px solid #f4f4f4;
  text-decoration: none;
}

<div id="fluidDescription_subContainer" style="">
  <div id="tableWrapper">
    <table name="sav" style="" id="fluidDescriptions_table" class="table">
      <tbody id="fluidDescriptions_tbody">
        <tr style="border-bottom: 1px solid #f4f4f4">
          <td id="fluidDescriptions_controlFunction">Typ 2.3</td>
        </tr>
        <tr style="border-bottom: 1px solid #f4f4f4">
          <td id="fluidDescriptions_steuerung">GAZ-7</td>
        </tr>
        <tr>
          <td>aaa</td>
        </tr>
        <tr>
          <td>bbb</td>
        </tr>
        <tr>
          <td>ccc</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">
    <b>Fluid-Plan</b>
    <i class="fa fa-file-pdf-o fa-5x"></i>
  </a>
</div>

您可能还想阅读this。