我们知道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. 学习《Hardware-Efficient Bilateral Filtering for Stereo Matching》一文笔记。

    个人收藏了很多香港大学.香港科技大学以及香港中文大学里专门搞图像研究一些博士的个人网站,一般会不定期的浏览他们的作品,最近在看杨庆雄的网点时,发现他又写了一篇双边滤波的文章,并且配有源代码,于是下载下 ...

  2. Salesforce Apex页面中调用远端网络服务

    本文介绍了Salesforce Apex页面中调用远端网络服务的实现过程. ### 注册远端网络服务 在使用Apex代码调用远端网络服务之前,首先需要在Salesforce中注册远端网络服务地址, 本 ...

  3. fopen函数和fread函数、fwrite函数

    fopen(打开文件) 相关函数 open,fclose 表头文件 #include<stdio.h> 定义函数 FILE * fopen(const char * path,const ...

  4. [LeetCode] Word Break II 拆分词句之二

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  5. 占位符行为 PlaceHolderBehavior 的实现以及使用

    这个效果我不太会描述 PlaceHolder直译占位符 也有人把这个效果叫水印效果 就是和HTML5的PlaceHolder属性一样的效果 上图直观: 使用方法: 首先下载 占位符行为dll.rar  ...

  6. ［EF1］POCOs（Plain Old C# Object）Entity Framework 4.x: POCOs入门

    原文链接:http://www.cnblogs.com/hjzhang/archive/2011/05/18/2050530.html POCOs 是在Visual Studio 2010和ASP.N ...

  7. 调用altera IP核的仿真流程—上

    调用altera IP核的仿真流程—上 在学习本节内容之后,请详细阅读<基于modelsim-SE的简单仿真流程>,因为本节是基于<基于modelsim-SE的简单仿真流程>的 ...

  8. 更新过程 renewal process

    一类随机过程.是描述元件或设备更新现象的一类随机过程.设对某元件的工作进行观测.假定元件的使用寿命是一随机变量,当元件发生故障时就进行修理或换上新的同类元件,而且元件的更新是即时的(修理或更换元件所需 ...

  9. Linux之sar命令介绍

    sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情 ...

  10. 一次kibana服务失败的排查过程

    公司在kubernetes集群上稳定运行数月的kibana服务于昨天下午突然无法正常提供服务,访问kibana地址后提示如下信息: 排查过程: 看到提示后,第一反应肯定是检查elasticsearch ...