In HTML, how can I get an input box to stretch in IE8?_问答_开发者

In HTML, how can I get an input box to stretch in IE8?

开发者 https://www.devze.com 2023-03-10 08:05 出处：网络

I have uploaded the following simple HTML code to http://losthobbit.net/temp/anchor.html <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">

I have uploaded the following simple HTML code to 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="tex开发者_如何学编程t" name="Text2" id="Text2" style="position: absolute;
                top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
    </div>
</body>
</html>

As you can see, I've specified the left and right, but not the width, in order to get it to stretch.

In Chrome it stretches as one resizes the browser, but this does not work in IE8 or FireFox. Any ideas about how I can fix this?

Thank you

Please note that people are suggesting I use a width percentage... unfortunately it doesn't solve my problem. I want the exact same behaviour that I have in Chrome, which is that of a left and right anchor. This means that the stretching is not a fixed percentage.

Give the <input> a parent element, set your current styles on that and give the <input> element 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>

Working demo: http://jsbin.com/ayiwa5

You have to specify the percentage width explicitly on the <input type="text" /> for IE and firefox.

See this jsfiddle: http://jsfiddle.net/LKnJT/2/

It is quite quirky with the absolute positioning but it will make the textbox resize with the browser window.

Note: if you remove the style="width:100%;height:100%" from the div it will still resize in Chrome.

[Update]
Try this one: http://jsfiddle.net/LKnJT/5/. Tested in chrome and IE. It keeps the textbox between the left and right specifications.

<!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>

How much do you want it to stretch? You can specify width but set its value in terms of percentage: