首页 > 其他 > 详细

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

时间:2014-07-26 00:59:06      阅读:2587      评论:0      收藏:0      [点我收藏+]

遇到 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; } 

bubuko.com,布布扣bubuko.com,布布扣

 

显示:

bubuko.com,布布扣

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

bubuko.com,布布扣bubuko.com,布布扣

显示:

bubuko.com,布布扣

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

bubuko.com,布布扣bubuko.com,布布扣

显示:

bubuko.com,布布扣            bubuko.com,布布扣

 

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

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

原文:http://www.cnblogs.com/qing-xuanlvyee/p/3868702.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!