1

この表を見てください：

<div style="position: absolute; right:0; top:0; width:100px;">
    <table style="width: 100%; border-bottom: white 1px solid">
      <tr>
        <td>X:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Y:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Z:</td>
        <td><input type="text" style="width:100%"/></td>
      </tr>
    </table>
</div>

http://jsfiddle.net/MDLMz/2/

Firefox では入力フィールドの幅は同じですが、Chrome では右と中央の幅が狭くなっています。

私はこれが起こるとは思いもしません、まったく手がかりがありません。

Chromeでこれを修正する解決策を知っていますか?

4

1 に答える 1

2

私はこれを解決しました。答えないままにしておくべきではありません。誰かがこの答えを役に立つと思うかもしれません。

問題は、Webkit のレンダリング順序に関するものでした。幅を自動のままにしておくと、最初にレンダリングされたテーブルセルが後のセルよりも大きくなります。

Firefox と Opera はテーブル全体を解析し、利用可能な幅を均等に分配します。これは私の意見では正しい方法です。

Chrome の修正は、テーブル内のすべての要素にパーセンテージを使用することです。自動値を残さないでください。

<table style="width: 100%">
      <tr>
        <td style="width:10%">X:</td>
        <td><input type="text" style="width:90%"/></td>
      </tr>
</table>

テーブルをあきらめたり、絶対ピクセル サイズを使用したりする必要はなくなりました。

于 2012-11-05T04:22:00.970 に答える