input的size属性

http://bbs.csdn.net/topics/340214577

INPUT元素是页面设计的最基本的元素之一，是FORM表单的组成部分，也可以单独使用。是用户交互必不可少的元素。

对于INPUT的布局，可能会出现在某些浏览器下正常，在某些浏览器中杂乱的现象：无缘无故的换行了- -！，曾经为此事甚感头疼。

造成布局问题的最直接的一个原因，往往是宽度高度设置的不合理导致的。更有甚者，是不设置高度，因为 INPUT 的size属性，也会影响它的宽度，所以，有的人往往只设置 size，不设置width，孰不知，因小而见大，一个不小心，就会出现布局的混乱。

size属性到底是？

当INPUT元素的“type”属性值为“text”（文本框）或“password”时（密码框），“size” 属性可以使输入框的宽度能够显示指定数目的字符。

而在 HTML4.01 中，对size的解释是：
size 属性告诉用户端其初始宽度，宽度以 ‘px’ 的形式给出，除非 INPUT 的 type 属性值是 “text”/“password”，那两种情况下，size 的属性值代表 INPUT 可容纳字符的个数。

既然，INPUT 是文本框和密码框的时候表示的是字符个数，那么，通过设置 size 所影响的 INPUT 元素的宽度，是不是会受字体宽度的影响呢？如果你有这一层想法，那就恭喜你了。

既然讲到字体宽度，就应该想到字体的默认类型。

各浏览器中的INPUT[type=”text”/”password”]默认字体类型

字体的默认样式在IE中是受页面编码影响的，在其他浏览器中则直接受浏览器语言版本的影响（本文提及的浏览器均为简体中文版）。大家可以通过开发工具查看默认字体。

测试

我们可以通过测试来看一下，在相同的字体和字体大小下，排除INPUT的padding和margin以及border的影响，各浏览器中INPUT的宽度大小。

<style>
    input {
       font: 12px Simsun;
       margin: 0;
       padding: 0;
       border: 0;
    }
</style>
<script>
    window.onload = function() {
       var info = document.getElementById("info");
       info.innerHTML = document.getElementById("in1").clientWidth+"px";
    }
</script>
<input size="12" type="text" id="in1">
<div id="info"></div>

在各个浏览器中，值：
[img=https://lh4.googleusercontent.com/_cWVUV6DMB20iRhHZpz_7WTti0YnAPDohFu7Tqj63ZyLn3Vw-qE7llTlZk6dc3V4mWSD31Ln23TuV01uD7jixfVBakTGlNp-5YLZcEQIPeSy5rAn][/img]
将字体 “Simsun” 改为“Arial”，后：
[img=https://lh6.googleusercontent.com/vy1HKza10NibI8AimPaVLO_DOCxh3ZoO3ZcfdptaQvK5h-7vLHcl9Ebdii5dvHsnpHg1HSalwLQEpNBuFc57FA2h28ioX1Pd69dYkUfI5irXDEgN][/img]
可见，即使在字体的大小和类型相同的条件下，INPUT的宽度还是有差异的。

慎用 size 代表宽度，用 width 特性较保险

用size代表宽度，会引起兼容性问题，再加上 INPUT本身的padding margin什么的差异，就更会影响了，所以，建议不要使用size设置宽度，最好使用 width来代替。

秒客网

input的size属性

相关文章