遇到 input
与select
设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论
input
width
,height
值里面, 不包含 border
边框和padding
内边距,即:设置的只是内容本身的高与宽。border
与padding
不在值里面,在浏览器上显示可见。
select
width
,height
值里面, 包含 border
边框和padding
内边距,即:设置的高宽里面包含了内容本身,border
与padding
的整体。padding
值,border
,内容是从值里面分走的高宽度,所以内容高宽会相对减小。如果padding
值超过了对应值,整体样式会变。
所以,两者设置相同的值,却会显示不整齐。
下图黄色为border
边框,绿色padding
,中间的蓝色是内容。
下图input
input{ height:32px; width:200px; }
下图select
select{ height:32px; width:200px; }
显示:
input{ height:32px; width:200px; }
select{ height:clac(32px + 2px); width:clac(200px + 2px); }
显示:
input{ height:32px; width:200px; padding:10px 10px; }
select{ height:clac(32px + 2px); width:clac(200px + 2px); padding:10px 10px; }
显示:
以上实验在pc端实用,今天发现在手机端行不通,特此为记:
在手机端的状态是,width
可以设置宽度,而高度用height
不顶用,两种方法可以改变高度:
-
font-size
可以撑起宽度,但字体改变了; -
加上
multiple
时宽度可用,但option
变成多选状态了;
所以以上都不完美
解决方法:
把select
放到一个div
里面,把div
高宽调成与同级input
相同,设置overflow:hidden
隐藏select
溢出,select
宽度设成100%
,border:none
,
至于垂直居中:由于select
不能设高度,就用jquery
控制,获取select
高度outerHeight, margin-top
:div高度减去它除以二,select设display:block
。
好了,说到这里了,下次用到时参考下,在调试吧。