SELECT在浏览器中相关Bug整理

  发布时间:2012-12-24 08:44:49   作者:佚名   我要评论
由于select下来菜单在使用中比较频繁,而且浏览器的兼容性不是很好,于是,搜集整理了一些在不同浏览器下的相关bug,需要了解的朋友可以参考下

IE6下的select 的 z-index始终高于其他元素,即无法被其他元素覆盖住。

解决方法:JQueryUI的做法是在IE6下当触发弹出层时,将想覆盖住的select隐藏

在IE7及以下 虽然disabled 对 select能起作用,但对select下的option却无效。

解决方法通常是判断浏览器,如果是IE7以下的话,则当change和focus时改变option颜色和并且点击“无效”的option后 select选中的项值不变化

复制代码
代码如下:

//判断是否是IE7以下浏览器
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0 || navigator.appVersion.indexOf("MSIE 6.0") >= 0
|| navigator.appVersion.indexOf("MSIE 7.0") >= 0) {
window.attachEvent("onload", function() {
ReloadSelectElement();
//给所有select添加事件
function ReloadSelectElement() {
var s = document.getElementsByTagName("select");
if (s.length > 0) {
for (var i = 0, select; select = s[i]; i++) {
(function(e) {
//获得焦点时,将当前选中的项目记录下来
e.attachEvent("onfocus", function() {
e.setAttribute("current", e.selectedIndex);
});
//项目改变时,如果选中的是“无效”的项目,则返回返回前一状态
e.attachEvent("onchange", function() {
restore(e);
});
})(select)
//将含有disabled属性的项目“无效化”
emulate(select);
}
}
}
function restore(e) {
if (e.options[e.selectedIndex].disabled) {
e.selectedIndex = e.getAttribute("current");
}
}
function emulate(e) {
for (var i = 0, option; option = e.options[i]; i++) {
if (option.disabled) {
option.style.color = "graytext";
}
else {
option.style.color = "menutext";
}
}
}
})
}

获取选中的option集合(即所有被选中的option)的方式在IE中与FF/Chrome中的差异:

如果select没有设置multiple的话(即单选的下拉菜单),可以直接用selectedIndex获取选中的option位置。

但是,当 multiple="multiple"时(即可多选的菜单),如果想获取到所有被选中的option集合,

FF/Chrome中可以直接用selectDoc.selectedOptions

而IE(IE8及以下)中则没有可以直接获取被选中的option集合的属性或方法

IE(IE8及以下)解决方法:

如果 multiple="multiple" 则需要迭代所有option,用optionDoc.selected判断是否被选中,从而获取被选中的option集合

在IE(6,7,8)下向select中插入option时看不到option中文本的Bug:

 先来看一组IE下事故现场

再看代码

复制代码
代码如下:

<select id="s" style="width:100px;background:lightskyblue"></select>
<select id="s2" style="width:100px;background:lightgrey"></select>
<script>
var s = document.getElementById("s");

//方式1
s.add(new Option("A", 1));
//方式2
s.appendChild(new Option("B", 2));
//方式3
s.insertBefore(new Option("C", 3),s.options[2]);
//方式4
s.options[3] = new Option("D", "B");
//方式5
var op = document.createElement("option");
op.appendChild(document.createTextNode("E"));
s.appendChild(op);
//方式6
var s2 = document.getElementById("s2");
s2.innerHTML = "<option>X</option><option>Y</option>";
</script>

正常来讲这5种方法都应该是没问题的。可结果是方法2,3,6失效。

解决方法的话。。只能是避开这个坑,使用1,4,5方法吧!

相关文章

  • 浅谈原生页面兼容IE9问题的解决方案

    这篇文章主要介绍了浅谈原生页面兼容IE9问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-12-16
  • 新版chrome浏览器设置允许跨域的实现

    这篇文章主要介绍了新版chrome浏览器设置允许跨域的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-11-30
  • css hack之\9和\0就可能对hack IE11\IE9\IE8无效

    每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览
    2020-03-20
  • css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    这篇文章主要介绍了css区分ie8/ie9/ie10/ie11 chrome firefox的代码,需要的朋友可以参考下
    2020-03-20
  • 解决CSS浏览器兼容性问题的4种方案

    这篇文章主要介绍了解决CSS浏览器兼容性问题的4种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-02-28
  • 常见的浏览器兼容性问题(小结)

    这篇文章主要介绍了常见的浏览器兼容性问题(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-02-20
  • border-radius IE8兼容处理的方法

    这篇文章主要介绍了border-radius IE8兼容处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-02-12
  • 浅谈遇到的几个浏览器兼容性问题

    这篇文章主要介绍了浅谈遇到的几个浏览器兼容性问题,详细的介绍了几种我遇到的问题和解决方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-26
  • base64图片在各种浏览器的兼容性处理

    这篇文章主要介绍了base64图片在各种浏览器的兼容性处理的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-14
  • 对常见的css属性进行浏览器兼容性总结(推荐)

    这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-20

最新评论