我们知道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. 【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用

    虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 . 那就在提交按钮的点击事件中 添加一句话: $(document).ready( function () ...

  2. hdu 5690 All x

    All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submiss ...

  3. C#的Enum——枚举

    枚举 枚举类型声明为一组相关的符号常数定义了一个类型名称.枚举用于“多项选择”场合,就是程序运行时从编译时已经设定的固定数目的“选择”中做出决定. 枚举类型(也称为枚举)为定义一组可以赋给变量的命名整 ...

  4. C# 使用线程池，设置每个线程的执行时间，过了时间强制结束

    改用thread来驱动这个方法先建一个类下面的成员,来存放进程List<Thread> pool = new List<Thread>();在需要启动你的方法的时候建进城Thr ...

  5. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  6. wpf ,tooltip的style

    <Style x:Key="MyToolTipStyle" TargetType="ToolTip"> <Setter Property=&q ...

  7. 运用datalist标签实现用户的搜索列表

    datalist是一个很强大的HTML5标签,支持一般类似于模糊查询,以前都是需要js来做的.下面是一个datalist配合js的小例子,主要是实现用户是否存在,以及添加过程中是否重复的判断. 首先是 ...

  8. 非传统题【A002】

    [A002]非传统题[难度A]————————————————————————————————————————————————————————————————————————————————————— ...

  9. linux read简单用法

    #!/bin/bash #read chars into var read -n var echo $var #read chars without showing it read -s var ec ...

  10. MFC MessageBox AfxMessageBox

    MessageBox 一.消息框是个很常用的控件,属性比较多,本文列出了它的一些常用方法,及指出了它的一些应用场合.1.MessageBox("这是一个最简单的消息框!");2.M ...