IE6设置select标签高度兼容性问题
来源:互联网 发布:二手软件哪个好些 编辑:程序博客网 时间:2024/05/04 05:07
一、问题描述
相信大家都遇到过select在IE6、7下设置高度无效的问题,但是在IE8及以上高版本的浏览器设置是有效的,包含google/火狐等都是有效的,但是就算是有效,在以上浏览器设置height后,显示的效果也是不一致的,有很大差异。[注:line-height的设定对select标签在各浏览器中也是无效的]
[注:各版本浏览器对select标签宽度width的设定都是有效和一致的,已经过测试]
二、解决方案
之前在网上看到有一个方案可以”很容易“解决IE67的select高度问题:设置font-size大小能直接影响高度,但是这种方法我试过,效果不是很好。具体解决办法如下:
1、如果不用兼容IE6,7的话,直接设置select的padding值即可解决高度问题。以下是select标签在各浏览器中的默认高度,根据默认高度,设置padding为相应值,以使select达到所需高度。
2、如果要兼容IE6,7,那就需要使用另一种方案了(采取select被嵌套在两层标签里,一层用来遮挡select的默认边框[在IE6、7中设置border:0px也是无效的,高版本可用],另一层用来模拟”高度改变后的“select边框),代码如下:
<style type="text/css">.border_select{ /*边框*/ display:inline-block; border:1px solid #ABADB3; border-top-color:#ABADB3; margin-top:2px; padding:5px; /*调整此处改变select高度*/}.select_default{ /*遮挡默认边框*/ display:inline-block; width:200px; *width:198px; height:18px; overflow:hidden;}.select_default select{ *margin:-2px; padding:1px; border:0px; width:200px; /*select的宽度*/}</style>
<span class="border_select"><!--边框--> <span class="select_default"><!--遮挡默认边框--> <select> <option value="state" selected="selected">选项一</option> <option value="state">选项二</option> <option value="state">选项三</option> <option value="state">选项四</option> <option value="state">选项五</option> </select> </span></span>
0 0
- IE6设置select标签高度兼容性问题
- 关于ie6/ie7下select标签的高度设置兼容
- ie6 7 8设置select的高度
- IE6、7中SELECT标签高度的兼容性修复
- IE6、7中SELECT标签高度的兼容性修复
- IE6兼容性问题 select 遮盖div
- HTML 设置select标签的高度
- ie6兼容性问题
- ie6中select标签动态插入选择项<option>后不能设置selected属性
- select options标签IE6兼容解决方案
- select标签 style设置
- select的高度设置问题
- 给select框设置高度
- IE6浏览器下设置div的高度
- IE6,IE7,FF兼容性问题
- IE6,IE7兼容性问题总结
- IE6,7兼容性问题
- jquery ajax ie6兼容性问题
- 对web标准的理解
- Redis数据持久化
- 驱动模块和桩模块的概念和区别
- iOS-地图标注(大头针)
- 1606 - Amphiphilic Carbon Molecules(极角排序)
- IE6设置select标签高度兼容性问题
- 开源C/C++网络库比较 ace &&bosst
- HDU5277 YJC counts stars (图论知识平面图)
- man机制
- 《鸟哥的Linux私房菜》第五章 首次登录与在线求助man page
- 次方求模
- hdu 3501 Calculation 2
- Lintcode - Expression Evaluation
- 【Ogre编程入门与进阶】第十五章 Ogre的“二维”与合成特效