边框框100％宽度计算-文本不合适

Question

我有一个令人困惑的有趣的盒子模型/宽度/继承问题。 基本上，这就是我所拥有的：

<table>
  <tr>
    <td>
      <div><input type="text">So the td is at least this big</input></div>
      <div>
        <button>The Fish Molecular Genetics and Biotechnology Laboratory</button>
        <button>Each button must be as wide as the widest one</button>
      </div>
    </td>
  </tr>
<table>

在此简化模型中， <td>具有（必须具有）自动宽度， <button>具有100％的宽度，并且display:block; 这样所有按钮的宽度都一样， <button>也有一些填充，几乎所有内容都具有box-sizing:border-box; 。

因此，呈现按钮时，其框宽将设置为它包含的文本的宽度。 但是，等等，它的框宽是从一个边框到另一个边框测量的，并且具有填充，因此文本实际上会换行到下一行。 由于许多良好的原因（在上述简化模型中并不明显），它必须是边界框。 而且td必须具有自动宽度，因为按钮会根据文本框中的内容实时更改。

Answer 1

这是一个不错的解决方法，但我仍然认为这可以视为错误。

<div>
  <button><span>The Fish Molecular Genetics and Biotechnology Laboratory</span></button>
  <button><span>Each button must be as wide as the widest one</span></button>
</div>

与

button {padding:0;}
button span {margin:1em;}

---

编辑
这里不止一件事情。 第二个问题是ems。 显然，当文本容器的宽度呈现为328.00003654 px时，文本换行可能会出错。 切换到span {margin:像素单位span {margin:解决。