`

IE不支持option的display:none属性

阅读更多

今天qa提了一个bug,明明是没有问题的,为什么会这样的,几乎是条件反射的想到了肯定是IE的问题(一般我用FF开发,qa用IE测试……),于是乎测试了一下,果然是IE有问题,简单的描述一下:

 

页面上有一个select,用jQ的选择器去获取能看到的一个下拉列表:

 

if($('#xxx_id :visible').length>0)

 

想当然的以为 这样的判断是没问题的,ff下这个表达式是true,IE下这个表达式是false,后来想到jQ里$('#xxx_id #yyy_id')这样的写法是获取容器xxx_id的子元素yyy_id,所以将中间的空格去掉,这样FF和IE就一致了,由于FF在有空格和没空格的情况下表现一样(都是true),因此又想当然的认为 是浏览器兼容性问题,于是问了levil和coddykilly,原来中间有空格即使后面是一个过滤器不是一个选择器,获取的元素也是子元素,因为我没有把length打印出来,所以错误的理解不管加不加空格应该都是select本身,那为什么IE下select的visible元素是0,而FF下是他的option呢?FF和IE一样都能“看见 ”选项啊,旋即又求助于G大叔,原来是万恶的IE 不支持“display:none"的属性,即使jQ是跨浏览器的,但是对于浏览器的这种比较” “的”标准 “也无能为力啊。

分享到:
评论
2 楼 silentime 2011-03-18  
to博导, 嗯?
1 楼 loserwn 2011-03-18  
visible:hidden
存在类似问题么?

相关推荐

    IE不支持option的display样式,只能使用remove和add

    本以为通过display:none即可实现,结果发现在option元素上使用display:none在firefox中有效,在IE6、IE7、IE8中都无效。    所以,通过javascript设置display:none也是在IE中无效,代码如下: it works……...

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

    在IE7中, 使用jQuery 显示:$(“#a... IE6,最怪异,使用display:none不能隐藏select标签 下面这两个,经测试,在三个版本中都能正常使用 隐藏:document.getElementById(“a”).style.display=”none”; 显示:docume

    div 模拟下拉列表

    由于老版本的IE浏览器对某些CSS属性和JavaScript特性支持不佳,因此在实现时需要特别考虑这些浏览器的适配,比如使用条件注释、CSS hack或jQuery的浏览器检测来处理差异。 创建div模拟下拉列表的基本步骤如下: 1....

    select下拉框支持搜索【中文搜索】文件

    option.style.display = 'none'; } }); }); ``` 这段代码中,我们首先获取到搜索框和`select`元素的引用,然后在搜索框的输入事件触发时,对每个选项进行检查。如果选项的文本包含搜索关键字,就显示该选项,...

    常用的javascript function代码

    document.getElementById(ListStr + j).style.display = "none"; } } ``` **注意事项**: - 这个函数需要确保`ListObj`包含正确的元素数量,并且ID符合预期的格式。 #### 四、`reSizeFrame` 函数 **功能说明**:...

    通过css改变下拉框样式

    隐藏下拉箭头稍微复杂一些,因为这不是所有浏览器都支持的标准属性。通常,我们可以通过覆盖`::-webkit-scrollbar`和`::-ms-expand`伪元素来实现。对于Webkit内核的浏览器(如Chrome和Safari),可以使用以下代码: ...

    CSS3默认样式

    display: none; } ``` #### 八、响应式设计支持 1. **媒体查询**:虽然示例代码中未直接体现,但在实际项目中通常会结合媒体查询来实现不同设备下的样式调整。 ```css /* 示例 */ @media screen and (max-...

    简单的下拉单项选择网页特效

    display: none; } select::after { content: "\25BC"; /* 下拉箭头图标 */ position: absolute; right: 10px; } ``` 3. JavaScript交互: 虽然HTML和CSS可以实现基本的下拉选择功能,但若需更复杂的交互效果,...

    基于Jquery模拟Select,解决IE显示问题

    <ul class="options" style="display:none;"> <li data-value="option1">Option 1 <li data-value="option2">Option 2 <!-- ... --> ``` 接下来,我们需要编写Jquery代码来处理这个自定义Select的行为。主要...

    2023年web前端研发工程师笔试题选择题带答案.doc

    12. 不属于document对象的方法:`bgColor`不在`document`对象的标准方法列表中,它可能是过时的IE特有属性。`focus()`、`getElementById()`和`getElementsByName()`是文档对象的常见方法。 13. 按键事件:`...

    html修改默认单选框样式

    例如,可以使用`-ms-border-radius`属性来为IE9提供圆角支持,或者为旧版IE创建一个方形的替代样式。 同时,需要注意的是,由于安全性和交互性的限制,我们无法完全模拟原生单选按钮的全功能,如拖放、键盘导航等。...

    在ie8上js实现简单的combobox功能(支持拼音检索)

    此外,确保所有的事件监听器使用传统的方式(如`onkeyup`)而不是`addEventListener`,因为IE8不支持`addEventListener`。 在实际应用中,你可能还需要考虑其他功能,如添加默认项、禁用项、清除输入框的功能,以及...

    纯CSS 级联菜单实现代码

    然而,对于IE6,由于其不支持`<li>`元素的`:hover`伪类,我们需要采取一些额外的策略。IE6仅支持`:hover`在`<a>`标签上,所以我们需要将`<a>`标签包裹在`<table>`内,以使`:hover`效果能在子菜单中生效。同时,我们...

    随手记的div+css的小抄代码

    - 使用 `display:inline` 和 `float` 来处理IE6浏览器的双倍边距问题,同时避免使用 `border-collapse` 属性来防止表格边框重叠。 #### 二、HTML结构元素使用详解 在HTML中,不同的标签有着不同的用途,下面将详细...

    javascript经典特效---下拉框选择显示图片.rar

    5. **优化与兼容性**:为了让这个功能在不同浏览器中都能正常工作,可能需要添加对旧版IE的支持,使用`attachEvent`替代`addEventListener`。同时,确保图片加载失败时有适当的处理机制,比如显示默认图片或错误提示...

    弹出框的现实和隐藏

    在实际开发过程中,可能会遇到一些特殊情况,例如在某些浏览器中(如IE),`<select>`元素的高度不能自动适应内容高度的问题。为了解决这个问题,我们可以采取以下策略: 1. **动态调整高度**:通过监听`<select>`...

    firefox下获取下列框选中option的text的代码

    但是,`textContent`并不考虑元素的CSS样式,例如`display`属性,这导致了与IE的兼容性问题。 为了解决这个问题,我们可以采取以下两种策略: 1. **扩展Firefox的DOM模型**:由于Firefox不支持`innerText`,我们...

    用CSS和Div美化select样式的简单方法

    例如,IE6浏览器无法改变SELECT的高度,而其他浏览器(除了Safari)则支持通过`height`属性来设置高度。为了解决这个问题,我们可以针对Safari浏览器使用`line-height`属性,因为它在Safari中有效。对于文字居中问题...

Global site tag (gtag.js) - Google Analytics