Why HTML input element gets resized by the browser?_问答_开发者

Why HTML input element gets resized by the browser?

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

I\'m trying to make a simple search form on my website and I\'m using the input HTML element. But it is acting really weird.

I'm trying to make a simple search form on my website and I'm using the input HTML element. But it is acting really weird.

It gets resized by the browser no matter which size I specify in the style. In the example below I've got an input element with the width of 180px, but the browser renders it as 147px. :/

Do you know what could be the problem?

Here's a video example and the code below: http://screencast.com/t/WwqAQDmofhf

<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    b开发者_如何学Pythonorder-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>

The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.

If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.

<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>

It's probably to do with: