html element ignores CSS left+right properties?

I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:

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

The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.

If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.

Any ideas how to work around this?

Thanks.

You can Use a 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>

It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.

It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea> which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%; and take care of the 10px margin on a container 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>

http://reference.sitepoint.com/css/bottom say, regarding internet explorer (<= 6)

don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height

The way it looks in Safari is not how it should display. Because you didn't specify a height value, the input will default to the size of the last inherited font size.

The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.

If you need to use the input field and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:

body{
    margin:10px;
}

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

This will stretch the input field to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.

If you have to have a margin, then set that in the body style or a wrapper DIV around the input field.

来源：https://stackoverflow.com/questions/450316/html-input-element-ignores-css-leftright-properties

标签

html

css

input

positioning

html <input> element ignores CSS left+right properties?