select中文字垂直居中解决办法
我们知道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的话,最好还是按照上面的兼容性写法吧。
select中文字垂直居中解决办法的更多相关文章
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
- input标签和fmt:formatDate 在jsp中同时使用引号解决办法
input标签和fmt:formatDate 在jsp中同时使用引号解决办法 使用input标签设置默认值value并格式化fmt时间格式处理 格式化前: <input type="d ...
- 误删Django的model中的表解决办法
误删Django的model中的表解决办法 1.model里面的表格实际的操作都在migrations文件夹中,里面记录了操作过程,当在database和model中删除表格时要注意初始化数据库时会报 ...
- Java:终于找到了在alloy中的JFileChooser中的弹出式菜单不显示文字的解决办法
alloy界面可以说是我写过的最漂亮的一种JAVA界面. 可惜不知为什么,至从几年前推出1.4版后,就再也没有更新了. 随着java版本的升级,一直很担心alloy有一天不再适用于java的最新版. ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- Linq-进行Json序列化的过程中出现错误解决办法
错误截图如下: 这是因为表t_sysuser与表t_sysrole之间存在外键联系导致的 解决办法: 进入到创建的linq to sql类中,右键[属性]-将序列化模式修改为[单向]保存即可
- ie6幽灵文字及解决办法
<!-- ie6 幽灵文字示例 --> <div style="width: 400px;"> <div style="float: lef ...
- jquery中常见问题及解决办法小结
1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click( ...
随机推荐
- linux系统如何管理文件
硬盘中的静态文件和inode(i节点) (1)文件平时都在存放在硬盘中的,硬盘中存储的文件以一种固定的形式存放的,我们叫静态文件. (2)一块硬盘中可以分为两大区域:一个是硬盘内容管理表项,另一个是真 ...
- Codevs堆练习
Codevs堆练习 黄金:2830.2879.2995.3110 钻石:1052.1063.1245.1246.2057.2573.3377 大师:1021.1765.2069.2913.3032
- [LeetCode] Range Sum Query 2D - Immutable 二维区域和检索 - 不可变
Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...
- [LeetCode] Wildcard Matching 外卡匹配
Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- 在ASP.NET Core中使用Angular2,以及与Angular2的Token base身份认证
注:下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angu ...
- CSS优先级
一.CSS代码出现的几个位置 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)Extern ...
- 360浏览器7.1抓触屏QQ空间包
- 前端性能优化---yahoo军规
一.尽可能减少HTTP请求数 二.使用CDN(内容分发网络) 三.添加Expire/Cache-Control头 四.启用Gzip压缩 五.将CSS放在页面最上面 六.将Script放在页面最下面 七 ...
- idea 如何隐藏/展示不想看到的文件
隐藏:在 Ignore files and folders中添加想要过滤的文件或文件夹名称 展示隐藏文件: 在过滤列表中删除掉文件或者文件夹就好了