在 HTML 中，如何讓輸入框在 IE8 中拉伸？

Question

我已將以下簡單的 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 中完全相同的行為，即左右錨點的行為。 這意味着拉伸不是一個固定的百分比。

Answer 1

給<input>一個父元素，設置你當前的 styles 並給<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

Answer 2

您必須在 IE 和 firefox 的<input type="text" />上明確指定百分比寬度。

看到這個jsfiddle： http://jsfiddle.net/LKnJT/2/

絕對定位非常古怪，但它會使用瀏覽器 window 調整文本框的大小。

注意：如果你從 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>

Answer 3

你希望它伸展多少？ 您可以指定寬度，但根據百分比設置其值：

width: 40%;

更新：

將此應用於輸入：

float: right;
width: 80%;

只要確保清除父容器上的浮動。

在 HTML 中，如何讓輸入框在 IE8 中拉伸？

問題描述

3 個解決方案

解決方案1
6 已采納 2011-06-03 09:29:36

解決方案2
2 2011-06-03 09:20:27

解決方案3
1 2011-06-03 09:11:40

在 HTML 中，如何讓輸入框在 IE8 中拉伸？

問題描述

3 個解決方案

解決方案1 6 已采納 2011-06-03 09:29:36

解決方案2 2 2011-06-03 09:20:27

解決方案3 1 2011-06-03 09:11:40

解決方案1
6 已采納 2011-06-03 09:29:36

解決方案2
2 2011-06-03 09:20:27

解決方案3
1 2011-06-03 09:11:40