我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。

下面我们通过对主要CSS属性的支持，打造全兼容select。

对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如下图片 所示：

我们可以得出以下研究属性

通过上述的研究成果属性汇总，我们知道IE6是无论如何设置都是固定高度为22px不变 的，而其他浏览器除safari都是支持height属性的，那么我们设置height:22px。那么现在我们修正一下safari浏览器，我们发现仅 有safari支持line-height属性,那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下 设置line-height:18px,这样在safari中select选择框的高度也是22px。最后FF和IE9里面的文字不居中，对其设定 padding:2px0,我们发现FF和IE9都居中了，但是各个浏览器的select的高度也并没有增加，那么这里有点疑问，在高度设定的情况下，小量数字的padding不增加整体高度？这样设置后，这几个浏览器中select的高度都是22px了。

下面是全兼容代码示例。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</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>

select在各个浏览器中的兼容性问题的更多相关文章

  1. cssRules在不同浏览器中的兼容性

    在一份HTML文档中可以用三种方式添加样式信息: 1.通过<link>元素引用外部样式表: 2.通过<style>元素在文档的头部添加样式信息: 3.在具体的文档元素上通过st ...

  2. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  3. js在IE浏览器和非IE浏览器中的兼容性问题

    下面列出IE和非IE中常见的一些js兼容性问题.  //window.event   IE:有window.event对象   非IE:没有window.event对象.可以通过给函数的参数传递eve ...

  4. 【转】DataURL在Web浏览器中的兼容性总结

    IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL IE8 data URL 最大长度限制为32k字节,超出无效.IE9+没有这个限制 IE只识别b ...

  5. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

  6. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  7. [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！

    原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...

  8. IE6中常见兼容性问题及浏览器显示难题

    1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...

  9. 表单input按钮在各浏览器之间的兼容性

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

随机推荐

  1. W:Failed to fetch http://archive.ubuntukylin.com:10006/ubuntukylin/dists/pre

    由于用ubuntu的时候装了几个ubuntukylin的软件(像搜狗拼音for linux),于是最近总是蹦出一个红色的三角提示,说无法更新,虽说不影响使用但是还是很不爽.解决方法记录如下: 进入系统 ...

  2. hdu 1517 博弈 **

    博弈题: 题意:2 个人玩游戏,从 1 开始,轮流对数进行累乘,直到超过一个指定的值. 解题思路:如果输入是 2 ~ 9 ,因为Stan 是先手,所以Stan 必胜如果输入是 10~18 ,因为Oll ...

  3. 使用VS把ASP.NET 5的应用发布到Linux的Docker上

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:我相信未来应用程序的部署模式首选一定会是Docker,所以.NET社区的朋友也不应该忽 ...

  4. C#中的Infinity有个小坑

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 昨天家里有事,上网也不方便,就没有推送文章.今天很累,也不长篇大论了.简单介绍一下最近遇到的 ...

  5. 在ASP.NET 5中读取配置文件

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 在ASP.NET 5中摒弃了之前配置文件的基础结构,引入了一个全新配置文件系统.今天推荐的文 ...

  6. 不通过App Store实现ios应用分发下载安装

    最近公司的项目准备着手宣传工作了,宣传手册上要印制App的下载地址二维码,但是客户端应用还未上线,需要一种临时的方案解决应用分发下载问题,通常ios应用必须通过苹果应用商店才能下载安装,但是也可以看到 ...

  7. C++ find 函数用法

    头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...

  8. 【SQL 数据库】将一张数据表信息复制到另一张数据表

    一.MySQL数据库 1.如果目标表存在 INSERT INTO 目标表  SELECT  * FROM 源表; 2.如果目标表不存在 CREATE TABLE 目标表 SELECT * FROM   ...

  9. ASP.NET中的GridView自带的编辑更新功能

    string ConStr = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].Connec ...

  10. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...