0

次のコードを使用しています

--- EDIT @annakata :完全なコードの追加

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
  <table id="additionalContactsTable" name="additionalContactsTable"
                                        width="100%"
                                >
                                        <thead>
                                                <tr>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Last</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>First</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Middle</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Email</b> </th>
                                                <tr>
                                        </thead>
                                        <tbody>

                                                <tr>

<td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > </td>

 </BODY>
</HTML>

この問題は、ユーザーが大きなテキストを入力すると、テキスト ボックスが拡大し、テーブルが歪むときに発生します。そこに size="30" を入れると、拡張の問題は修正されますが、解像度が異なると、構造の動作が異なります。

望ましいものを優雅に達成するための修正や中華鍋はありますか？

4

4 に答える 4

1

この問題を解決するには、次のコードを使用します

...
<td width="100%">
  <table style="table-layout:fixed;width:100%">
    <tr>
      <td style="padding-right:7px;">
        <input style="width:100%;" type="text"/>
      </td>
    </tr>
  </table>
</td>
...
于 2009-03-11T19:42:54.593 に答える
1

わかりました。これが IE で複製されていることがはっきりとわかります。

次のシナリオに依存するIEのバグのようです（IEにはパーセンテージに関する悪名高い問題があります）。

  • 入力はテーブルにあります
  • AND 入力のサイズがパーセンテージである
  • AND 入力には、幅を超えるデフォルト値 (つまり、マークアップ内) があります。

したがって、明らかな回避策がいくつかあります。

  • 代わりに入力をフローティング<div>レイアウトに配置します (意味的に正しい場合はこれを行います)。
  • em(できれば) またはpx(デザインに余裕がある場合)のような単位でのサイズ幅
  • ロード後にクライアント スクリプトで値を挿入します (これは適切な解決策ではありません。実行しないでください)。

テーブルとパーセンテージの両方が必要な場合に推奨する、自明ではない回避策の1つ：

  • IE のみの CSS ルールwidth: expression(this.parentNode.offsetWidth*0.9);

お役に立てれば。

（コードを要求する以前の回答は削除されました）

編集:サンプルに基づくコード スニペットは、IE + FF で動作します

<style>
/* table method */
table {width: 100%;}
th {width: 25%; text-align: center; font-weight: 700;}
td {height: 24px; width: 25%;}
td input {overflow: hidden; width: 90%; }
/* IE only correction */
* html td input {width: expression(this.parentNode.offsetWidth*0.9);}

/* float method */
#foo {width: 100%;background:blue;}
#foo div {float:left; width: 25%;}
#foo div  input {width: 90%;}
 </style>

<table>
    <thead>
            <tr>
                    <th>Last</th>
                    <th>First</th>
                    <th>Middle</th>
                    <th>Email</th>
            <tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" /> 
                </td>
            </tr>
    </tbody>
</table>

<div id="foo">
    <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > 
    </div>
</div>
于 2009-01-08T09:37:50.303 に答える
0

CSS ルールを使用する width: expression(this.parentNode.offsetWidth*0.9); 私の問題を解決..ビンゴ!!

于 2009-11-03T09:30:17.163 に答える
0

この問題を自分で解決しただけで、落ちてしまいました...

文書型定義を次のように変更

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

ただし、ページの他の部分が飛び回らないように注意してください。

于 2009-10-13T17:55:20.540 に答える