Question

我正在尝试一起使用Flexbox和表格。 Firefox上的输出显示与Google Chrome和Safari上的显示不同。我观察到在谷歌Chrome和Safari上，td元素包装。此外，每个td的最大宽度不超过50％。但是，在Firefox上，这些样式规则被忽略（即使我进入代码控制台时，它们也没有被删除，这意味着它们应该受到浏览器的尊重）。在Firebox上，当我缩小窗口时，图像会缩小，但它们永远不会包裹。

这不是关于使用表是否是最佳实践。有人可以解释为什么浏览器之间的这种行为会有所不同，即使所有这些浏览器表面上都支持flexbox。我尝试了moz前缀，但它没有用。我已经检查了caniuse.com和Flexbox上的Mozilla documentation，两者都表明完全支持Flexbox。

这些是CSS：

tr
{
    margin: 0;

    display: flex;  
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;

    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -webkit-align-items: center;
    -webkit-align-content: center;
}

td
{
    padding: 1em 1em 1em 1em;
    text-align: center;
    max-width: 50%;

    flex-shrink: 1;
    flex-grow: 1;

    -webkit-flex-shrink: 1;
    -webkit-flex-grow: 1;
}

以下是HTML：

<div>
    <table>
        <tr>
          <td><a href=""  target="_blank"><img src="../images/gifs/gummo.gif" /></a></td>
          <td>
              <div id="gummo-quote" class="gif-copy">
              <p>Lorem ipsum etc.</p>
              <p>Lorem ipsum etc.</p>
            </div>
           </td>
        </tr>
    </table>
  </div>

Flexbox行为 - Chrome与Firefox

0 个答案: