0

我正在使用以下代码

--- 编辑@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

好的，我现在可以清楚地看到它在 IE 中的复制。

这似乎是 IE 中的一个错误（IE 在百分比方面存在臭名昭著的问题），具体取决于以下情况：

  • 输入在表格中
  • 并且输入的大小以百分比为单位
  • 并且输入有一个超过宽度的默认值（即在标记中）

因此存在一些明显的解决方法：

  • 将输入<div>改为浮动布局（如果语义正确，我会这样做）
  • 以单位为单位的尺寸宽度，例如em（最好）或px（如果您的设计负担得起）
  • 加载后用客户端脚本注入值（这是一个糟糕的解决方案，不要这样做）

如果您需要表格和百分比，我会推荐一种不明显的解决方法：

  • 仅 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 回答
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 回答
0

刚刚解决了自己这个问题，然后我就摔倒了...

将文档类型定义更改为

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

但要注意页面的其他部分不要开始跳来跳去。

于 2009-10-13T17:55:20.540 回答
0

使用 CSS 规则宽度：表达式（this.parentNode.offsetWidth*0.9）；解决了我的问题..宾果！

于 2009-11-03T09:30:17.163 回答