我们知道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. 第三篇：用SOUI能做什么？

    SOUI-DEMO界面预览 在回答SOUI能做什么之前,先看看SVN中demo工程的界面截图: 使用SOUI实现上面的界面主要的工作全在配置几个XML文件,基本不需要写C++代码.(如何配置XML布局 ...

  2. World of Warcraft

    一大堆快捷键 鼠标中键:致盲 上滚:闪避 下滚:疾跑 通用:~伺机待发 Q加速 E斗篷 R徽章 T消失 alt+Q脚踢,alt+W毒刃 alt+E亡灵意志 alt+D烟幕弹 alt+F死亡标记 Z天降 ...

  3. iOS开发资料链接

    ios开发中文文档了 http://developer.apple.com/library/ios/#referencelibrary/GettingStarted/RoadMapiOSCh/chap ...

  4. 在Salesforce中处理Email的发送

    在Salesforce中可以用自带的 Messaging 的 sendEmail 方法去处理Email的发送 请看如下一段简单代码: public boolean TextFormat {get;se ...

  5. POJ 1947 Rebuilding Roads 树形DP

    Rebuilding Roads   Description The cows have reconstructed Farmer John's farm, with its N barns (1 & ...

  6. hdu 3001(状压dp, 3进制）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 由于本题中一个点最多能够访问2次,由此可以联想到3进制; visited[i][j]表示在状态i ...

  7. Windows7系统主题制作全程教程

    jpg 改 rar

  8. 看懂UML类图与时序图

    看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...

  9. LoadRunner 常用C语言函数使用

    strlen:获取字符串的长度 char str[20]="容我想想"; int len; len = strlen(str); lr_output_message("s ...

  10. js实现页面的自动读秒跳转

    <!-- 代码片段A --> <!-- 倒计时跳转 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...