`
langkins
  • 浏览: 34913 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

IE6下边div隐藏和显示时页面重画的问题

阅读更多

我遇到了div显示和隐藏的问题,在ff,ie7,myie,safari下都能正常工作,唯独ie6不正常。
问题描述:
用div定义了一个导航树,需要显示或者隐藏这个树,具体做法就是设置div的css。
jsp(html):abc.jsp

......

<span widget="StateView">
<div id="sidebar-pane" >
<div class="header-text">Project files</div>
<span id="project-tree-view" widget="ProjectTreeView"></span>
</div>
<div id="sidebar-hider" onclick-class="sb-hidden" ><img src="../images/white-left-triangle.gif" style="position: absolute; left: 2px; bottom: 50%;">
</div>
<div id="sidebar-shower" onclick-class=""> <img src="../images/white-right-triangle.gif" style="position: absolute; left: 2px; bottom: 50%;">
</div>
<span id="main-pane" widget="StateView" ></span>

......

</span>

 

js:StateView.js

_package_('StateView', [['class','../js/class.js'],['Widget','../js/Widget.js']], function () {
    StateView = _class_(Widget, {
        _new_: function (element) {
            Widget.call(this, element);
            setupHandlers.call(this, element);
        },

        ......

   setStateClass: function (className) {
            if (className.charAt(0) == '~') {
                className = className.substr(1);
            } else {
                className = ' ' + className;
            }
            var childNodes = this.element.childNodes;
         //   var ie6 = getIEVersion() == 6 ? true:false;           
                       
            for (var i = 0; i < childNodes.length; i++) {                  
                if(childNodes[i].tagName){//could be a blank, IE6 can't handle it                                           
                            childNodes[i].className = childNodes[i].defaultClassName + className;            
            }

          
            return false;
        }
    });

    function setupHandlers(element) {
              
       for (var i = 0; i < element.childNodes.length; i++) {
            var childNode = element.childNodes[i];
        
            if(!childNode.tagName)  continue;//could be a blank, IE6 can't handle it
           
            childNode.defaultClassName = childNode.className;
            if (childNode.nodeType == 1) {
                var att = childNode.attributes["onclick-class"];
                 if (att) {
                    var className = att.nodeValue;                   
                    // <div onclick-class="~something"> means that "something" should be directly
                    // appended to class names when the mode is entered, rather than adding an
                    // additional class name to the list of classes held by elements.
                                    childNode.onclick = lazyApply(bind(this, this.setStateClass), [className]);
                } else if (childNode.getAttribute('widget')==null) {
                    try {
                        setupHandlers.call(this, childNode);
                    } catch(e) { }
                }

......

css:

......


/* sidebar-hider */
#sidebar-hider, #sidebar-shower {
    position: absolute;
    top: 0px;
    bottom: 0;
    width: 10px;
    background: #bccade;
    cursor: pointer;
    height:100%;
}
#sidebar-hider:hover, #sidebar-shower:hover {
    background: #ccdaee;
}
#sidebar-hider {
    left: 200px;
}
#sidebar-hider.sb-hidden {
    display: none;
}
#sidebar-shower {
    display: none;
    left: 0;
}
#sidebar-shower.sb-hidden {
    display: block;
}
#sidebar-pane.sb-hidden {
    display: none;
}
#main-pane.sb-hidden {
    left: 10px;
}

只贴了核心的js代码,将widget标签对应有一个同名的js文件,定义了一个这样的class,如StateView,对应的StateView.js,在abc.jsp中会自动的去new StateView 对象,主要是通过setupHandlers(element)方法去改变对应html tag的css来达到效果,但是红色标记的那段代码,在ie6下某些效果就不是理想的情况。
比如abd.jsp中红色标记的部分即为显示和隐藏导航树的tags,但是ie6下上述js无法有效的change some of the styles,只有第一个div能凑效(id=sidebar-pane

请大家发表意见。

thank u.

(不知道这些信息是否够,如还需补充,请跟帖,谢谢)

 

 

分享到:
评论

相关推荐

    JS显示隐藏DIV(动画效果)

    在描述中提到的“递增显示”和“递减隐藏”,可能指的是通过逐渐改变`div`的`opacity`(透明度)或`height`(高度)来实现渐显和渐隐。例如,可以设置一个初始值,然后通过定时器逐步增加或减少这些值,同时结合`...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...

    ie6下select覆盖div的解决办法

    4. **JavaScript解决方案**:使用JavaScript监听Select的打开和关闭事件,当Select打开时,隐藏Div,Select关闭后显示Div。这种方法需要考虑浏览器兼容性和性能,而且可能会有用户体验上的影响。 5. **CSS ...

    DIV+CSS IE圆角

    然而,早期版本的Internet Explorer(尤其是IE6、IE7和IE8)并不支持CSS3的一些高级特性,比如圆角。这就意味着在这些浏览器中,我们无法直接使用CSS来创建圆角效果。"DIV+CSS IE圆角"这个主题就是针对这个问题,...

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的...

    DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性

    在网页设计中,`DIV+CSS`是一种常用的技术,它能够实现页面的结构与样式分离,提高网页的可维护性和可扩展性。然而,不同浏览器对CSS的支持程度并不完全一致,尤其是在IE6、IE7和Firefox(FF)之间,存在诸多兼容性...

    ie6 ie7 ie8找出指定tab页并显示到前端

    在早期的Internet Explorer浏览器,包括IE6、IE7和IE8,由于JavaScript的实现和DOM操作的限制,处理页面中的选项卡(tab)切换功能相比现代浏览器更为复杂。这些浏览器并未提供像现代浏览器那样完善的API来支持动态...

    IE6,IE7,IE8兼容性问题

    **问题描述**:当设置了一个div的`float`属性,并且设置了左右`margin`时,在IE中可能会出现实际距离比预期更大的问题。 **解决方案**: - 将该div的`display`属性设置为`inline`。 **示例代码**: ```html #box...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    然而,不同的浏览器对CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(如IE6、IE7、IE8)与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

    div层实现IE Firefox 页面半透明遮罩效果弹窗

    例如,可以通过改变div的`style.display`属性,使其在需要时显示或隐藏。还可以结合事件监听,比如点击按钮触发弹窗。 标签中的“源码”意味着我们可以从提供的链接(由于实际环境中无法访问,此处仅做理论分析)...

    超酷炫的div弹出层 可以包含图片 页面及隐藏

    超酷炫的div弹出层 可以包含图片 页面及隐藏 兼容IE ff

    jquery实现点击指定div外区域隐藏该div

    - `$(selector).show()` 和 `$(selector).hide()`:分别用于显示和隐藏元素。 #### 示例代码分析 ```javascript $(document).ready(function() { // 针对特定的 input 元素绑定点击事件 $("input").click...

    IE6 两个div有间隙的问题(IE 3px bug)

    这个bug表现为在IE6下,当两个浮动(floated)的div相邻时,它们之间会出现一个3像素的间距,这与在其他浏览器(包括更新版本的IE)中的表现不符。这个问题的根源在于IE6对浮动元素的盒模型处理方式与其他浏览器不同...

    最全的CSS浏览器兼容问题整理(IE6、IE7)

    在Web开发中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对老旧的Internet Explorer版本,如IE6和IE7。了解和掌握这些兼容性技巧,能有效提升网页在不同浏览器上的表现。 1. **垂直居中...

    兼容IE6的遮罩层

    在早期的Web开发中,IE6浏览器由于其市场份额和用户需求,经常需要特别考虑兼容性问题。"兼容IE6的遮罩层"是一个常见的技术挑战,涉及到网页元素的层叠上下文、透明度处理和CSS hack等知识点。下面将详细阐述这些...

    ie6,ie7兼容性总结

    在Web开发过程中,特别是针对早期浏览器如Internet Explorer 6 (IE6) 和 Internet Explorer 7 (IE7) 的支持时,开发者经常会遇到一系列兼容性问题。这些问题往往源自于不同浏览器对CSS规范的不同实现方式。本文将...

    ie6,7下空DIV无任何内容时占据空间问题解决

    IE6和IE7浏览器在处理HTML中空的div元素时有一个特殊的表现,那就是即使div内没有任何内容,它仍然会占据一定的空间,而这种行为与其他主流浏览器(如Firefox、Chrome、Safari等)是不同的。在这种情况下,空div将...

    div+css浏览器兼容问题

    在探讨“div+css浏览器兼容问题”这一主题时,我们首先需要理解,浏览器兼容性问题主要源于不同浏览器对Web标准的解析和实现存在差异。这不仅包括主流浏览器如Chrome、Firefox、Safari、Edge以及IE(尤其是IE6)之间...

Global site tag (gtag.js) - Google Analytics