Why HTML input element gets resized by the browser?
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:
padding: 6px 27px 6px 6px;
27px of right padding + 6px of left padding + 147px of reported width = 180px
Have you tried it with Javascript turned off in your browser?
Does it happen in this example?
加载中,请稍侯......
精彩评论