IE6下js通过css隐藏select的一个bug

今天遇到一个问题， 当隐藏表格行 Tr 时　
$id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");，
表格行 Tr 里面的 select 在 IE6 中隐藏不了，还是会显示在页面当中。想单独设置 select 的样式为隐藏
$id("new_attpm_id2_" + id).style.setAttribute('cssText',"display:none;");
也隐藏不了，上网搜索找到文章《IE6下，js通过css隐藏select的一个bug》，原来这是 IE6 的一个 Bug ，可以通过 style.display = "none"；使其隐藏。
最终代码如下　$id("new_attpm_id2_" + id).style.display = "none";　问题顺利解决。

请在ie6下打开：ie6_js_hidden_select_bug.html

通过：

document.getElementById('J_Test').style.display = 'none';
可以隐藏select元素。

但是通过：

document.body.id = 'page';
配合css代码：

#page select { display: none; }
在ie6下，无法隐藏select元素。
尝试position, setTimeout, 改变zoom到1.001等方法，均失败。

想起ie6下，臭名昭著的select需要用iframe遮罩的bug，估计和上面的bug根由是一样的：在ie6下，select是windowed element，其表现和普通的HTML elements有本质上的区别。至于究竟为何？估计只能去看微软的源码了。

赞 (0)

相关推荐

  • js+css实现select的美化效果

    js+css实现select的美化效果

    先给大家看一看美化之后的效果图: CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-sele

  • 用JavaScript来美化HTML的select标签的下拉列表效果

    用JavaScript来美化HTML的select标签的下拉列表效果

    首先通过一个例子来回顾一下select标签的用法: <html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">

  • 用javascript来实现select标签的美化的代码

    论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 程序代码 function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 } 2.不改变原有表单项,表单的页面代码不去破坏: 程序代码 <f

  • select标记美化--JS式插件、后期加载

    select标记美化--JS式插件、后期加载

    <select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里.效果图在底部. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个cl

  • 用javascript实现select的美化的方法

    论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 复制代码 代码如下: function loadSelect(selectobj){  //传入一个select对象就能将他的样式美化  } 2.不改变原有表单项,表单的页面代码不去破坏:

  • select下拉选择框美化实现代码(js+css+图片)

    select下拉选择框美化实现代码(js+css+图片)

    因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等.效果如下图: 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}

  • 用javascript和css模拟select的脚本

    模拟 美化 select_我们 var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.get

  • css+js实现select列表横向排列效果代码

    请选择ABCDEFGHI_select横排效果_我们 *{font-size:12px;} A.s_l { BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px } A.s_l:hover { BORDER: #003366 1px solid;BORDER-rig

  • select标签模拟/美化方法采用JS外挂式插件

    select标签模拟/美化方法采用JS外挂式插件

    <select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个class名称 &

  • IE6下js通过css隐藏select的一个bug

    今天遇到一个问题, 当隐藏表格行 Tr 时 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");, 表格行 Tr 里面的 select 在 IE6 中隐藏不了,还是会显示在页面当中.想单独设置 select 的样式为隐藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"

  • IE6下JS动态设置图片src地址问题

    这两天赶一个项目,要求鼠标点击小图显示大图,于是用JS来根据小图来设置大图的SRC,设计完后问题就出来了.在IE6下大图显示不出,鼠标放置在图片上右键链接地址是可以正常显示链接地址的,并且点击显示图片图片才能被正常显示.IE7,IE8和FF是没有这些问题的.代码如下: 复制代码 代码如下: function picclick() { var pic = $('marqueediv').getElementsByTagName('a'); var len = pic.length; for(var

  • jQuery在ie6下无法设置select选中的解决方法详解

    本文实例讲述了jQuery在ie6下无法设置select选中的解决方法.分享给大家供大家参考,具体如下: 这里主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head&g

  • JS解决ie6下png透明的方法实例

    复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

  • ie6下png图片背景不透明的解决办法使用js实现

    我们时常在使用png图片的时候,在ie6下发生背景不透明的问题,下面给大家介绍下一个js解决的方式. 首先我们要用到一个js,代码如下: 复制代码 代码如下: /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.diller

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • Asp.net MVC下使用Bundle合并、压缩js与css文件详解

    Asp.net MVC下使用Bundle合并、压缩js与css文件详解

    前言 介绍本文的正式内容之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件.但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4-6个.Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多

  • js实现下拉框效果（select）

    js实现下拉框效果（select）

    效果图: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style typ

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    在IE7中, 使用jQuery 显示:$("#a").attr("style",""); 隐藏:$("#a").attr("style","display:none"); 但是显示这个方法在IE8中不行 IE8 显示:$("#a").removeAttr("style"); 隐藏:$("#a").attr("style

随机推荐