Firefox 中的渲染损坏答案

【问题标题】：Broken rendering in FirefoxFirefox 中的渲染损坏
【发布时间】：2015-09-15 23:38:22
【问题描述】：

我今天遇到了一件奇怪的事情，这让我完全不解出了什么问题。这段代码在我的 MBP 上的 FF 40.0.3 中渲染效果不佳，但在 Chrome 和 Safari 中没有任何问题。

<table>
    <tr>
        <td style="width: 100%;"></td>
        <td>
            <button style="width: 100%">Edit</button>
        </td>
    </tr>
</table>

谁能指出为什么按钮比它的标签短？

【问题讨论】：

标签： html css firefox

【解决方案1】：

这是因为你在td中设置了100%的宽度。

你需要设置td的宽度而不是button。

<br/>
<br/>
<table width="100%">
    <tr>
        <td style="border:1px solid red">100% ?</td>
        <td style="border:1px solid red">
            <button style="width:100%;border:1px solid red">Edit</button>
        </td>
    </tr>
</table>

【讨论】：

感谢您的回复。好吧，这个 sn-p 只是为了显示错误的渲染。在我的真实情况下，我需要一列来占据整个宽度，而所有其他列的宽度刚好足以容纳内容。在实际情况下，按钮列只有 8 个像素宽，这是不可接受的。而且这种行为只存在于FF中。
是否可以将第一个td的宽度设置为90%，另一个设置为10%。 ?
我不是在寻找解决方法。我希望了解为什么这段简单的 HTML 在 FF 和其他浏览器中以不同的方式呈现。然后根据这些知识决定如何修复它。