在Firefox中破碎的渲染

Question

我今天遇到了一些奇怪的事情让我感到困惑。 这条代码在我的MBP上的FF 40.0.3中效果不佳，但在Chrome和Safari中没有任何问题。

https://jsfiddle.net/j07vrjv1/1/

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

有人能指出为什么按钮比标签短吗？

Answer 1

这是因为您在td中设置了100％的宽度。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;