HTML input 标签的 size 属性

size属性到底是？

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

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

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

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

测试

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

 1 <style>
 2     input {
 3        font: 12px Simsun;
 4        margin: 0;
 5        padding: 0;
 6        border: 0;
 7     }
 8 </style>
 9 <script>
10     window.onload = function() {
11        var info = document.getElementById("info");
12        info.innerHTML = document.getElementById("in1").clientWidth+"px";
13     }
14 </script>
15 <input size="12" type="text" id="in1">
16 <div id="info"></div>

即使在字体的大小和类型相同的条件下，INPUT的宽度还是有差异的。

总结

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

 

大惠安网

大惠安网

大惠安网

大惠安网

大惠安网

大惠安网

转载于:https://www.cnblogs.com/zycBlogs/articles/4661397.html