select 控件 的长度问题。

[万玩完顽完]

有一个select 控件 <select id="select1" style="width:100px" />

使用 jquery 获取 select 控件的长度 var width= $("#select1").width();
用alert(width) ; 读出来

每次获取的select 长度 ，总是会小于100px; 而且再次获取时其长度又会变短 最后 缩短的看不见。。。why~?what happen?

[XZowie]

引用 楼主 fangzuli 的回复:

有一个select 控件 <select id="select1" style="width:100px" /> 使用 jquery 获取 select 控件的长度 var width= $("#select1").width(); 用alert(width) ; 读出来 每次获取的select 长度 ，总是会小于100px; 而且再次获取时其长度又会变短 最后 缩短的看不见。。。why~?what happen?

引用 楼主 fangzuli 的回复:

有一个select 控件 <select id="select1" style="width:100px" /> 使用 jquery 获取 select 控件的长度 var width= $("#select1").width(); 用alert(width) ; 读出来 每次获取的select 长度 ，总是会小于100px; 而且再次获取时其长度又会变短 最后 缩短的看不见。。。why~?what happen?

雖然 select 標籤是 inline-block 但瀏覽器layout 時是使用 border-box 的樣式 以上不懂沒關係，簡單說： 1. select 的 width:100px 是指包含border在內共100px 2. jQuery.fn.width() 是指 innerWidth (不包含border、margin) 3. 獲取總寬度請用 jQuery.fn.outerWidth(); 即： var width= $("#select1").outerWidth();

[万玩完顽完]

引用 1 楼 u012280941 的回复:

[quote=引用 楼主 fangzuli 的回复:] 有一个select 控件 <select id="select1" style="width:100px" /> 使用 jquery 获取 select 控件的长度 var width= $("#select1").width(); 用alert(width) ; 读出来 每次获取的select 长度 ，总是会小于100px; 而且再次获取时其长度又会变短 最后 缩短的看不见。。。why~?what happen?

引用 楼主 fangzuli 的回复:

有一个select 控件 <select id="select1" style="width:100px" /> 使用 jquery 获取 select 控件的长度 var width= $("#select1").width(); 用alert(width) ; 读出来 每次获取的select 长度 ，总是会小于100px; 而且再次获取时其长度又会变短 最后 缩短的看不见。。。why~?what happen?

雖然 select 標籤是 inline-block 但瀏覽器layout 時是使用 border-box 的樣式 以上不懂沒關係，簡單說： 1. select 的 width:100px 是指包含border在內共100px 2. jQuery.fn.width() 是指 innerWidth (不包含border、margin) 3. 獲取總寬度請用 jQuery.fn.outerWidth(); 即： var width= $("#select1").outerWidth();[/quote] input 控件 不 通用 呢?

[XZowie]

不通用，詳細請參考w3c的文件 (HTML、CSS 規範) 如果想要讓作法一致 可以修改CSS的屬性，讓Form相關的控件保持一致