CSS: почему ширина ввода: 100% не расширяется в абсолютном поле? - PullRequest
Новая
       35

CSS: почему ширина ввода: 100% не расширяется в абсолютном поле?

1 голос
/ 17 марта 2010

У меня есть 2 входа: оба имеют width: 100%, а второй - абсолютное поле: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #box1 { position: absolute }
            #box1 { background: #666  }
            input { width: 100% }
        </style>
    </head>
    <body>
        <form>
            <input type="text">
            <div id="box1">
                <input type="text">
            </div>
        </form>
    </body>
</html>
  • В стандартных браузерах width: 100%, похоже, не влияет на ввод внутри абсолютно позиционированного блока, но влияет на ввод, который не находится внутри этого абсолютно абсолютного блока.
  • В IE7 оба входа занимают всю ширину страницы.

Два вопроса приходят на ум:

  • Почему width: 100% не работает со стандартными браузерами? Я должен сказать, что то, как IE7 делает это, кажется мне более интуитивным.
  • Как я могу заставить IE7 отображать такие вещи, как другие браузеры, если я не могу удалить width: 100% и не могу установить ширину в абсолютно позиционированном окне?

Ответы [ 5 ]

2 голосов
/ 07 сентября 2011

Попробуйте использовать width:102%. Это обходной путь, но он работает почти идеально.

1 голос
/ 17 марта 2010

Спецификация CSS 2.1 говорит, что то, что происходит в этом случае, не указано. И действительно, разные браузеры реализовали это по-разному. Вы найдете более подробную информацию об этом (включая больше случаев и скриншотов) на: Свойство Width внутри абсолютно позиционированного блока .

0 голосов
/ 17 марта 2010

Это может показаться странным, но что произойдет, если вы попробуете ширину: 98%? В прошлом я обнаружил, что использование 100% ширины никогда не давало постоянного результата, а 98% -.

0 голосов
/ 17 марта 2010

Когда элемент блока (ваш div - # box1) абсолютно позиционирован, он как бы теряет свою подразумеваемую ширину 100%.Вот почему вход не может расширяться за пределы своего контейнера (который теперь имеет ширину 0).

0 голосов
/ 17 марта 2010

position: absolute выводит элемент из потока документов. Насколько я знаю, ширина автоматически становится auto при position: relative.

Я думаю, вам не удастся придать # box1 фиксированную ширину (используя width свойство или координаты, такие как left: xyz; right: xyz) или ввод текста.

Как я могу заставить IE7 отображать такие вещи, как другие браузеры, если я не могу удалить width: 100% и не могу установить ширину в абсолютно позиционированном блоке?

Хороший вопрос. Насколько я знаю, нет никакого исправления для этого поведения. Настройка width: auto должно помочь.

Некоторая теория о position: absolute о W3C здесь .

...