我们知道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. Android Studio导入Project、Module的正确方法

    Gradle Project项目.Module模块导入 最近看到网上很多人在抱怨,Android Studio很难导入github上下载下来的一些项目,主要包括: 1.导入就在下载Gradle2.根本 ...

  2. BZOJ 2434: [Noi2011]阿狸的打字机 [AC自动机 Fail树 树状数组 DFS序]

    2434: [Noi2011]阿狸的打字机 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2545  Solved: 1419[Submit][Sta ...

  3. 【repost】JavaScript Scoping and Hoisting

    JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed ...

  4. HTML 学习笔记 JavaScript（call方法详解）

    http://www.cnblogs.com/f-dream/p/4950918.html

  5. Django基础，Day1 - 环境安装与pycharm创建django项目

    Django是一个高级Python Web框架,支持快速部署,清理和实用的设计.它可以被轻易部署和提供实用的组件,而开发人员只需要专注于写自己的应用程序,而不需要重复造轮子.并且Django是自由和开 ...

  6. Linux的Shell

    Shell是命令行解释和执行器,是介于使用者和操作系统内核(Kernel)之间的一个接口: Bash (Bourne Again shell) 是Linux系统下经典的Shell;

  7. oracle日常——数据库备份

    1.进入cmd 2.运行命令 exp [scott]/[orcl]@[orcl] file=[d:\oracle_back\scott_orcl.dmp] owner=scott 格式如下: exp ...

  8. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  9. cocos2d-x3.x自定义事件

    -- 自定义事件 -- 监听: local eventDispatcher = self:getEventDispatcher();--self为继承Node的对象 local function ha ...

  10. C#操作图片帮助类

    using System; using System.Collections; using System.IO; using System.Drawing; using System.Drawing. ...