边框 100% 宽度计算 - 文本不适合答案

【问题标题】：Border-Box 100% Width Calculation - Text Doesn't Fit边框 100% 宽度计算 - 文本不适合
【发布时间】：2012-09-18 13:20:59
【问题描述】：

我有一个有趣的盒子模型/宽度/继承问题，我正在费解。基本上，这就是我所拥有的：

<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 必须具有自动宽度，因为按钮会根据文本框中的内容实时更改。

【问题讨论】：

如果我给按钮设置 102% 的宽度，它可以工作，除了它们比它们应该具有相同宽度的东西宽 2%，并且它可能在小型设备上表现不一致或者如果在用户代理样式表中指定了更大的字体大小。
这样的？：jsfiddle.net/bw8XC
@Shmiddty：在某个时候，我会想在 td 上设置一个最大宽度，并像往常一样将非常长的包裹起来。将white-space:nowrap 替换为padding:1em 以查看问题。
它们必须是按钮吗？您可以改用 div 或锚标记。
如果你使用锚标签，盒子大小将正常工作。按钮的样式一直很麻烦，因为浏览器不会放弃对它们的完全控制。

标签： html css forms button width

【解决方案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: 切换到像素单位解决了这个问题。

【讨论】：

快速查看我注意到您使用的标签名称为<buttom>。我从来没见过，它是一个有效的html标签吗？
是的。我尽可能将它们用于触发动作的事情，而不是把你带到另一个页面或页面上另一个地方的事情。它避免了像<a href="#"> 或<a href="javascript:void(0)"> 这样的语义无意义的代码。唯一的缺点是您必须设置大量样式，以使其不会像 <input type="button"/> 那样呈现。