标签：des style color os strong io width re
遇到 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; width:200px; } 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; }
显示：
input与select 设置相同宽高，在浏览器上却显示不一致，不整齐,布布扣,bubuko.com
input与select 设置相同宽高，在浏览器上却显示不一致，不整齐
标签：des style color os strong io width re
原文地址：http://www.cnblogs.com/qing-xuanlvyee/p/3868702.html
