我们知道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. LinkedList<E>源码分析

    LinkedList的数据结构就是双向链表,如下所示: private static class Node<E> { E item;//数据元素 Node<E> next;// ...

  2. jpa

    学习尚硅谷jpa笔记: 所依赖的jar包: 首先在META-INF下创建配置文件,persistence.xml <?xml version="1.0" encoding=& ...

  3. [LeetCode] Delete Node in a BST 删除二叉搜索树中的节点

    Given a root node reference of a BST and a key, delete the node with the given key in the BST. Retur ...

  4. [LeetCode] Largest BST Subtree 最大的二分搜索子树

    Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where largest mea ...

  5. [LeetCode] Word Pattern II 词语模式之二

    Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...

  6. CheungSSH国产自动化运维工具开源Web界面

    CheungSSH web2.0 发布文档 CheungSSH 简介 CheungSSH是一款国人自主研发的Linux运维自动化管理服务器软件,秉着为企业降低运营成本,解放管理员双手和自动化生产的理念 ...

  7. Hibernate 查询方式(HQL/QBC/QBE)汇总

    作为老牌的 ORM 框架,Hibernate 在推动数据库持久化层所做出的贡献有目共睹. 它所提供的数据查询方式也越来越丰富,从 SQL 到自创的 HQL,再到面向对象的标准化查询. 虽然查询方式有点 ...

  8. Stream与byte[]与Image与string

    public byte[] GetByteImage(Image img) { byte[] bt = null; if (!img.Equals(null)) { using (MemoryStre ...

  9. Java各种数据结构实现

    1.单向链表 实现思路:创建Node类,包括自己的数据和指向下一个:创建Node类,包括头尾节点,实现添加.删除.输出等功能. tips:n = n.next不破坏链表结果,而n.next = n.n ...

  10. sql分页操作

    看到了网上关于分页的讲解  对最快的分页语句做了测试 还别说速度真快 总共6w条数据 速度确实so 快 前提是id是主键 或者是索引 declare @page int;--页数 declare @P ...