0

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

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

4

1 回答 1

0

这是一个不错的修复，但我仍然认为这有资格作为一个错误。

<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:固定的像素单位。

于 2012-09-26T21:21:39.047 回答