input与select 设置相同宽高,在浏览器上却显示不一致,不整齐
2014-07-25 18:14
246 查看
遇到 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{ [b]height:32px; width:200px; } select{ [b]height:32px; width:200px; } [/b][/b]
显示:
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不顶用,两种方法可以改变高度:
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。
好了,说到这里了,下次用到时参考下,在调试吧。
input width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽。border与padding不在值里面,在浏览器上显示可见。
select width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding的整体。padding值,border,内容是从值里面分走的高宽度,所以内容高宽会相对减小。如果padding值超过了对应值,整体样式会变。
所以,两者设置相同的值,却会显示不整齐。
下图黄色为border边框,绿色padding,中间的蓝色是内容。
下图input 下图select
input{ [b]height:32px; width:200px; } select{ [b]height:32px; width:200px; } [/b][/b]
显示:
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不顶用,两种方法可以改变高度:
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。
好了,说到这里了,下次用到时参考下,在调试吧。
相关文章推荐
- 解决Input与Select设置CSS宽度相同时显示宽度不同的解决!
- 关于CSS设置不显示苹果和google等浏览器input文本框边框自动产生颜色的问题
- input与select在不同浏览器上的宽度显示不同
- 不同浏览器上input与select宽度显示不同的本质原因
- input与select在不同浏览器上的宽度显示不同
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- 设置浏览器地址栏URL前面显示的图标
- js如何取得网页中input或select值,并在当前网页显示?
- 谷歌和火狐下input输入框中的光标大小显示不一致
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- 我的VS2005采用的是web开发设置。不知道动到了那里,现在每次按F5启动调试的时候总是不能成功启动调试。效果和按CTRL+F5一样。就是把项目显示在了浏览器之后,那个启动调试的绿色按钮还可以使用,不是暗色的。
- select在各浏览器中显示option的测试
- applet运行信息在浏览器终端显示设置
- loadrunner 回放时显示浏览器的设置
- Eclipse选中变量名,相同变量都变色显示 的设置
- Eclipse选中变量名,相同变量都变色显示 的设置
- js创建表格、创建input、判断浏览器类型、设置新创建的input的name属性
- eclipse中相同变量显示变色设置
- Eclipse选中变量名,相同变量都变色显示 的设置