在 HTML 中，如何让输入框在 IE8 中拉伸？答案

【问题标题】：In HTML, how can I get an input box to stretch in IE8?在 HTML 中，如何让输入框在 IE8 中拉伸？
【发布时间】：2011-06-03 17:44:08
【问题描述】：

我已将以下简单的 HTML 代码上传到http://losthobbit.net/temp/anchor.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Anchor Test</title>
</head>
<body>
    <div style="width:100%;height:100%">
        <input maxlength="250" type="text" name="Text2" id="Text2" style="position: absolute;
                top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
    </div>
</body>
</html>

如您所见，我指定了左右，但没有指定宽度，以便让它伸展。

在 Chrome 中，它会随着浏览器大小的调整而拉伸，但这在 IE8 或 FireFox 中不起作用。关于如何解决此问题的任何想法？

谢谢

请注意，人们建议我使用宽度百分比...不幸的是，它并不能解决我的问题。我想要与 Chrome 中完全相同的行为，即左右锚点的行为。这意味着拉伸不是一个固定的百分比。

【问题讨论】：

标签： html internet-explorer firefox internet-explorer-8

【解决方案1】：

给<input>一个父元素，设置你当前的样式，然后给<input>元素width:100%。

<div style="width:100%;height:100%">
  <span style="position: absolute; top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
    <input maxlength="250" type="text" name="Text2" id="Text2" style="width:100%; height:100%;">
  </span>
</div>

工作演示：http://jsbin.com/ayiwa5

【讨论】：

谢谢。或者，如果我将大小转移到 div，那么它也可以工作。如果有人有任何其他解决方案，我仍然希望看到它们。
是的，这也行。由于您的 <div> 是全页宽度，而 <input> 不是，我认为您在 <div> 中会有其他内容。

【解决方案2】：

对于 IE 和 firefox，您必须在 <input type="text" /> 上明确指定百分比宽度。

查看这个 jsfiddle：http://jsfiddle.net/LKnJT/2/

绝对定位很奇怪，但它会使文本框随浏览器窗口调整大小。

注意：如果您从 div 中删除 style="width:100%;height:100%"，它会仍然在 Chrome 中调整大小。

[更新]
试试这个：http://jsfiddle.net/LKnJT/5/。在 chrome 和 IE 中测试。它将文本框保持在左右规范之间。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Anchor Test</title>
    </head>
    <body>
        <div style="position:absolute;left:150px;right:20px;">
            <input maxlength="250" type="text" name="Text2" id="Text2" style="text-align:left;width:100%">
        </div>
    </body>
</html>

【讨论】：

谢谢你，但这并不能解决我的问题。我想要与 Chrome 中完全相同的行为，即左右锚点的行为。这意味着拉伸不是一个固定的百分比。
我已经用一个解决方案更新了答案，使文本框在左右锚点之间伸展。
是的，这就是我对安迪回答的评论的意思：）谢谢

【解决方案3】：

您希望它伸展多少？您可以指定宽度，但根据百分比设置其值：

width: 40%;

更新：

将此应用于输入：

float: right;
width: 80%;

只需确保在父容器上clear float。

【讨论】：

我希望它以与 Chrome 中相同的方式拉伸...根据您调整它的大小。与左右锚定的行为相同。
...基本上这意味着宽度不会是一个固定的百分比。