Элемент html <input> игнорирует свойства CSS слева и справа?

Я заметил, что элемент <input> в HTML игнорирует пару CSS "left" и "right". То же самое для пары "верх" и "снизу". См. Пример кода ниже:

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

<input> должен занимать почти все пространство в браузере (кроме границы 10 пикселей вокруг него). Он отлично работает в Safari, но в FireFox и IE <input> остается маленьким в верхнем левом углу браузера.

Если я использую "left" и "width", "top" и "height", тогда все работает нормально. Однако я не знаю, что такое ширина и высота, я хочу, чтобы они были скорректированы в зависимости от размера окна браузера.

Любые идеи, как обойти это?

Спасибо.

Ответ 1

Вы можете использовать Wrapper DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

Ответ 2

Он не игнорирует левый или верхний, вы увидите, что он занимает позицию 10px. Что происходит, так это то, что правое и нижнее не соблюдаются. Элементы формы обрабатываются немного специально в механизмах компоновки, вполне возможно, что FF/IE считает, что ширина/максимальная длина ввода важнее, я действительно не изучал, почему это возможно.

Тем не менее, это немного странно. Возможно, вам лучше было бы рассмотреть <textarea>, который предназначен для обеспечения большого ввода текста, который вы можете нажать на 100% размеров, применив width: 100%; height: 100%; и позаботиться о марке 10px в контейнере div.

WFM:

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

Ответ 3

http://reference.sitepoint.com/css/bottom скажем, относительно интернет-исследователя (< = 6)

не поддерживает спецификацию положения и размеров абсолютно позиционированного элемента, используя верхний, правый, нижний и левый вместе; они будут использовать последнее заданное вертикальное и горизонтальное положение и должны быть указаны размеры, заданные с использованием ширины и высоты

Ответ 4

То, как он выглядит в Safari, не так, как должно отображаться. Поскольку вы не указали значение высоты, input по умолчанию будет иметь размер последнего унаследованного размера шрифта.

Правое и нижнее позиционирование также игнорируются, потому что вы одновременно пытаетесь установить верхнее и левое поля. Похоже, что в этом случае они имеют приоритет.

Если вам нужно использовать поле input и отображать его во всей ширине и высоте окна браузера в момент его просмотра, вам нужно выполнить повтор CSS следующим образом:

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

Это растягивает поле input так же высоко и широко, как у пользователя окно браузера. Он также будет иметь маржу вокруг каждой стороны в 10 пикселей из окна браузера.

Если у вас есть запас, то установите это в стиле body или обертке DIV вокруг поля ввода.