html - Border-Box 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 像素时，文本换行可能会出错。为 span {margin: 切换到像素单位修复了这个问题。