select中文字垂直居中解决办法
来源:互联网 发布:编程光速qa 编辑:程序博客网 时间:2024/04/29 20:54
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select。
我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0、height.no.padding.100、no.height.no.padding,结果如 链接图片各浏览器DEMO外观
我们可以得出以下研究属性。
ie6
ie7
ie8
ie9
ff
ch
sf
op
默认高度
22px
22px
19px
20px
19px
19px
height
F
T
T
T
T
T
F
T
padding
F
F
T
T
T
T
F
T
line-height
F
F
F
F
F
F
T
F
文字垂直居中
T
T
T
F
F
T
T
T
通过上述的研究成果属性汇总,我们知道IE6是无论如何设置都是固定高度为22px不变的,而其他浏览器除safari都是支持height属性的,那么我们设置 height:22px。那么现在我们修正一下safari浏览器,,我们发现仅有safari支持line-height属性那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下设置 line-height:22px,最后FF和IE9里面的文字不居中,对其设定 padding:2px 0,我们发现FF和IE9都居中了,但是各个浏览器的select的高度也并没有增加,那么这里有点疑问,在高度设定的情况下,小量数字的padding不增加整体高度?
下面是全兼容代码示例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>*{padding:0; margin:0}body{font-size:12px}select{height:22px; line-height:18px; padding:2px 0}</style></head><body><div style="margin-top:20px; margin-left:20px; background:#000"><select> <option>演示问题一</option> <option>演示问题二</option> <option>演示问题三</option> <option>演示问题四</option> <option>演示问题五</option></select></div></body></html>
另外,如果你想要设置宽度或高度,还想要实现在各浏览器中兼容的效果,那么你最好使用js做出下拉效果,这就和select标签没有关系了。
刚才参考了一下京东的和淘宝右边的充值区,淘宝使用的是js效果实现的下拉效果;而京东使用的是select,但其高度都在20px左右,所以文字的效果看上去是垂直居中的,在Google中你可以看到改变高度文字还是居中,但是在FF下文字就偏上了,所以要使用select的话,最好还是按照上面的兼容性写法吧。
参考自:http://www.kuqin.com/webpagedesign/20120228/318485.html
- select中文字垂直居中解决办法
- select 文字垂直居中方法
- div中文字垂直居中
- div中文字垂直居中
- div中文字垂直居中
- <td>中文字垂直居中
- UITextView 文字莫名其妙垂直居中解决办法
- 在IE8,FF中<select>控件文字垂直居中的处理方法
- DIV中文字水平、垂直居中
- css div中文字垂直居中显示
- input中文字的垂直居中
- div中 文字垂直居中的解决方案
- ie8兼容问题(二) select文字垂直居中问题
- Android中TextView文字居中与垂直靠左居中
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- 文字垂直居中效果
- select 文字垂直居中方法
- 图像特征点概述
- 说说Java中的Set List Map存储方式个各有什么不同
- BZOJ2222 [Cqoi2006]猜数游戏
- Windows 安装express失败
- select中文字垂直居中解决办法
- how to find out the response code(200,404,400...) of the URL?
- tools to save an entire Web site
- Universal-Image-Loader(android图片缓存)
- C/C++头文件一览
- hdu 2063 过山车(二分最大匹配)
- 2013-10-30 关于服务器端对象的属性
- windows下检测软件的网络连接
- Path Sum II