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>提供父元素，在其上设置当前样式并提供<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

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

请参阅此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>

Answer 3

你想要伸展多少？您可以指定宽度，但可以按百分比设置其值：

width: 40%;

<强>更新

将此应用于输入：

float: right;
width: 80%;

确保父容器上的clear float。

在HTML中，如何在IE8中获取输入框？

3 个答案: