我们知道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中文字垂直居中解决办法的更多相关文章

  1. 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 ...

  2. input标签和fmt:formatDate 在jsp中同时使用引号解决办法

    input标签和fmt:formatDate 在jsp中同时使用引号解决办法 使用input标签设置默认值value并格式化fmt时间格式处理 格式化前: <input type="d ...

  3. 误删Django的model中的表解决办法

    误删Django的model中的表解决办法 1.model里面的表格实际的操作都在migrations文件夹中,里面记录了操作过程,当在database和model中删除表格时要注意初始化数据库时会报 ...

  4. Java:终于找到了在alloy中的JFileChooser中的弹出式菜单不显示文字的解决办法

    alloy界面可以说是我写过的最漂亮的一种JAVA界面. 可惜不知为什么,至从几年前推出1.4版后,就再也没有更新了. 随着java版本的升级,一直很担心alloy有一天不再适用于java的最新版. ...

  5. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  7. Linq-进行Json序列化的过程中出现错误解决办法

    错误截图如下: 这是因为表t_sysuser与表t_sysrole之间存在外键联系导致的 解决办法: 进入到创建的linq to sql类中,右键[属性]-将序列化模式修改为[单向]保存即可

  8. ie6幽灵文字及解决办法

    <!-- ie6 幽灵文字示例 --> <div style="width: 400px;"> <div style="float: lef ...

  9. jquery中常见问题及解决办法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click( ...

随机推荐

  1. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  2. 【原】移动web滑屏框架分享

    本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...

  3. java 集合

    1. 2.for循环的时候会改变角标,所以删除需要--,增加需要++ 3.去除重复元素2(用的实质都是对象的equals方法) 4.Treeset 里面的add方法 5.treeSet里面addstu ...

  4. BZOJ 2743 【HEOI2012】 采花

    题目链接:采花 这道题一眼看去,一个很显然的想法就是莫队.但是数据范围是\(10^6\)级别的,莫队显然已经过不去了. 其实感觉这道题和以前写过的一道题HH的项链很像.只不过那道题要求的是区间出现次数 ...

  5. The Euler function[HDU2824]

    The Euler functionTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...

  6. [LeetCode] Add Two Numbers II 两个数字相加之二

    You are given two linked lists representing two non-negative numbers. The most significant digit com ...

  7. 滤镜 filter：gray 变灰色

    .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...

  8. CodeForces - 453A Little Pony and Expected Maximum

    http://codeforces.com/problemset/problem/453/A 题目大意: 给定一个m面的筛子,求掷n次后,得到的最大的点数的期望 题解 设f[i]表示掷出 <= ...

  9. 定制sqlmap tamper脚本

    前言 渗透测试过程中遇到注入点常常丢到sqlmap中进行测试,假如网站有waf,sqlmap便无法直接注入了. 测试 在测试某个项目的过程中,一个页面的aid参数,习惯性的提交 and 1=1发现直接 ...

  10. [信安Presentation]一种基于GPU并行计算的MD5密码解密方法

    -------------------paper--------------------- 一种基于GPU并行计算的MD5密码解密方法 0.abstract1.md5算法概述2.md5安全性分析3.基 ...