我们知道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. hdu 5033 单调栈 ****

    看出来是单调栈维护斜率,但是不会写,2333,原来是和询问放在一起的 #include <iostream> #include <cstdio> #include <cs ...

  2. ICP 算法步骤

    The Iterative Closest Point (ICP) is an algorithm employed to match two surface representations, suc ...

  3. Linux文本比较-diff&awk

    最近为了完成工作,需要将两个文件A.old和A进行比较,然后将A中新增加的部分保存到A中,其他部分删除.经过查找相关资料,发现有两种比较好的方法. 1. 使用diff命令 diff old.file ...

  4. 回忆一次面试Android研发的问题

    有NDK开发JNI程序经验优先 intent   intentfileter 阿里云 线程,异步 1.图片缓冲2.解压3.获取搜索记录 4.在安卓开发过程中用到那些框架

  5. 总结列表显示ListView知识点

    全选ListView的item条目 单选ListView的条目 多选ListView的item条目 自定义ArrayAdapter动态改变ListView的不同item样式 动态增加和删除ListVi ...

  6. Android之Adapter用法总结（转）

    Android之Adapter用法总结 1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(List View,Grid Vie ...

  7. ubuntu kylin中如何截图

    windows操作系统中,我通常使用的截图工具是QQ的“ctrl+alt+a”快捷键.但是在ubuntu中,linux qq常年不更新,我也就彻底放弃了使用了,反正ubuntu通常只是拿来开发.其实没 ...

  8. 接着上一篇 《Is WPF dead》

    最近美国的PM传来消息,说微软在收集开发者的意见,会对WPF进行改进,微软会主要在1) performance 2) interop 3) touch and 4) access to WinRT A ...

  9. LeetCode——Rotate Image（二维数组顺时针旋转90度）

      问题: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockw ...

  10. 使用canvas实现擦玻璃效果---转载

    <!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport&quo ...