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

編集
ここでは複数のことが起こっています。2 つ目の問題は ems でした。テキストのコンテナーの幅が 328.00003654 px としてレンダリングされると、テキストの折り返しがうまくいかないようです。span {margin:固定のピクセル単位に切り替えます。

于 2012-09-26T21:21:39.047 に答える