input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

遇到 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                  下图select

input{ height:32px; 200px; }       select{ height:32px; 200px; } 

 

显示:

input{ height:32px; 200px; }       select{ height:clac(32px + 2px); clac(200px + 2px); }

显示:

input{ height:32px; 200px; padding:10px 10px; }  select{ height:clac(32px + 2px); clac(200px + 2px); padding:10px 10px; }


显示:

           

 

以上实验在pc端实用,今天发现在手机端行不通,特此为记:

在手机端的状态是,width可以设置宽度,而高度用height不顶用,两种方法可以改变高度:

1.font-size可以撑起宽度,但字体改变了

2.加上multiple时宽度可用,但option变成多选状态了;

所以以上都不完美

解决方法:

    把select放到一个div里面,把div高宽调成与同级input相同,设置overflow:hidden隐藏select溢出,select宽度设成100%,border:none,

至于垂直居中:由于select不能设高度,就用jquery控制,获取select高度outerHeight, margin-top:div高度减去它除以二,select设display:block。

好了,说到这里了,下次用到时参考下,在调试吧。

 

 

原文地址:https://www.cnblogs.com/qing-xuanlvyee/p/3868702.html