В HTML, как я могу получить растянуть поле ввода в IE8? - PullRequest
Новая
       24

В HTML, как я могу получить растянуть поле ввода в IE8?

3 голосов
/ 03 июня 2011

Я загрузил следующий простой 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, а именно левого и правого якоря. Это означает, что растяжение не является фиксированным процентом.

Ответы [ 3 ]

6 голосов
/ 03 июня 2011

Дайте <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

2 голосов
/ 03 июня 2011

Вы должны явно указать процентную ширину в <input type="text" /> для IE и firefox.

Смотрите это jsfiddle: http://jsfiddle.net/LKnJT/2/

Это довольно странно с абсолютным позиционированием, но размер текстового поля изменится с окном браузера.

Примечание: если вы удалите style="width:100%;height:100%" из div, он все равно изменится в Chrome.

[Update]
Попробуйте это: 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>
1 голос
/ 03 июня 2011

Сколько вы хотите, чтобы он растянулся? Вы можете указать ширину, но установить ее значение в процентах: 

width: 40%;

UPDATE:

Применить это к входу: 

float: right;
width: 80%;

Просто убедитесь, что очистил float на родительском контейнере.

...