select在各个浏览器中的兼容性问题
们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要CSS属性的支持，打造全兼容select。
对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如下图片所示：
我们可以得出以下研究属性。
| IE6 | IE7 | IE8 | IE9 | Firefox | Chrome | Safari | Opera | |
| 默认高度 | 22px | 22px | 20px | 19px | 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:18px,这样在safari中select选择框的高度也是22px。最后FF和IE9里面的文字不居中，对其设定 padding:2px 0,我们发现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">
<html xmlns="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>
转载于:https://www.cnblogs.com/xuemingyao/p/6000926.html
select在各个浏览器中的兼容性问题相关推荐
- php多浏览器支持,测试网站在多个浏览器中的兼容性：MultiBrowser ┆V1.3.1 多国语言版...
MultiBrowser应该是做网站设计,网站设计师必备的软件了,此软件可以测试网站在多个浏览器中的兼容性!MultiBrowser能够让你同时检查同一网页在chrome.firefox.ie等浏览器 ...
- RegExp在IE8等浏览器中的兼容性问题
这里讲的兼容性问题主要指String的API在正则表达式的处理上不同. 匹配结果的兼容性 第一个问题:在IE<=8中,如果split()方法的限定符是正则表达式,返回的数组不包含空值元素,而如果 ...
- html引入vue不兼容ie11,Vue在IE11版本浏览器中的兼容性问题
一:Vue 2.x cli1. 使用vue2.0的项目在IE11版本浏览器中是空白的 或者路由跳转但是而页面显示依旧是上一个路径的页面元素 这是因为ie11不支持es6 而我们之前有使用的bab ...
- select 在各浏览器中显示option的测试结果分享
原网址:http://www.jb51.net/css/76690.html 使用select的范例在ie8时显示出问题,ie7下直接显示不了option,经过查资料将其兼容了,这里记录一下,感兴趣的 ...
- html中padding在ie8兼容性,怎么解决bootstrap在各版本IE浏览器中的兼容性问题？
元芳怎么了 Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,也就是说,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的.bootstrap3支持的浏览器:C ...
- 360浏览器兼容问题html,该页面显示了360浏览器中的异常兼容性问题
简介: 在Web应用程序的开发过程中,发现某些页面无法在360浏览器上正确显示,但是在其他浏览器上360浏览器页面显示不全,它们都处于正常状态. 有什么问题吗? 询问: 网页在360浏览器上显示不正确 ...
- Html和CSS在浏览器中常见的兼容性问题处理
1,居中问题 格里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码: margin: 0 auto; 2,高度问题 两上下排列或嵌套的格,上面的格设置高度(高度),如果DIV里的实际内容大 ...
- html中添加ie兼容性视图,IE11浏览器添加到兼容性视图中的网站无法保存怎么办？...
IE11浏览器添加到兼容性视图中的网站无法保存怎么办?有用户在使用IE11浏览器时遇到了瓶颈,就是在兼容性列表中保存网站了,当重启浏览器之后,添加保存的网址和设置都没有了,为什么兼容性视图网站列表会无 ...
- [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
最新文章
- 【Android NDK 开发】JNI 引用 ( 全局引用 | NewGlobalRef | DeleteGlobalRef )
- Day01-图像处理原理与深度学习入门
- vue 公用页面引用_关于vue全局引用公共的js和公共的组件的折腾
- 使用Dockerfile构建SpringBoot应用镜像
- java中的多线程来看一看基础了
- Facebook发布张量理解库，自动编译高性能机器学习核心
- matlab图片包微盘,如何用Matlab绘制二维图形资料下载
- Eclipse —— 官网下载地址
- 实时全局光照Screen Space Reflection (SSR)
- STM32 FFT算法实现
- 【引人深思】程序员锁死服务器致公司倒闭
- matlab使用记录--读取当前文件夹所有文件、找到最新创建的文件、app designer打开文件选择窗口
- SpringBoot安全验证之Referer拦截器
- 2021南京大学计算机考研分数线,【34所院校线】南京大学2021考研复试分数线已公布...
- [生存志] 第43节 齐文姜齐宣姜争艳
- proto plugin
- 台湾大学教授洪士灏对产业前景的讨论
- python音乐下载_python 音乐下载演示源代码
- 使用MobileViT替换YOLOv5主干网络
- 税务系统服务器维护导致逾期申报了,山东省电子税务局逾期申报处罚等功能升级啦！...
热门文章
- win7一直显示正在关机_windows8.1和windows7哪个好_win8.1好还是win7好用
- java语言编译_java在线编译-编译,java
- activiti Stream之list转map及问题解决
- 电大考的是职称英语同计算机,最新电大统考计算机应用基础真题选择题详细分析小抄.doc...
- mysql字段命名_Mysql 01—数据库表字段的命名规则
- matlab disp函数_从零开始的matlab学习笔记——（13）符号计算中的多项式
- apache php 调优_Apache的性能优化实例（一）
- kmem 反编译linux内核_24小时学通Linux内核之如何处理输入输出操作
- 帝国cms index.php?id=调不到指定文章,帝国cms修改实现TAG标签以TAGID的方式伪静态...
- 孙鑫-MFC笔记三--绘图