我遇到了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.
(不知道这些信息是否够,如还需补充,请跟帖,谢谢)
分享到:
相关推荐
在描述中提到的“递增显示”和“递减隐藏”,可能指的是通过逐渐改变`div`的`opacity`(透明度)或`height`(高度)来实现渐显和渐隐。例如,可以设置一个初始值,然后通过定时器逐步增加或减少这些值,同时结合`...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...
4. **JavaScript解决方案**:使用JavaScript监听Select的打开和关闭事件,当Select打开时,隐藏Div,Select关闭后显示Div。这种方法需要考虑浏览器兼容性和性能,而且可能会有用户体验上的影响。 5. **CSS ...
然而,早期版本的Internet Explorer(尤其是IE6、IE7和IE8)并不支持CSS3的一些高级特性,比如圆角。这就意味着在这些浏览器中,我们无法直接使用CSS来创建圆角效果。"DIV+CSS IE圆角"这个主题就是针对这个问题,...
jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的...
在网页设计中,`DIV+CSS`是一种常用的技术,它能够实现页面的结构与样式分离,提高网页的可维护性和可扩展性。然而,不同浏览器对CSS的支持程度并不完全一致,尤其是在IE6、IE7和Firefox(FF)之间,存在诸多兼容性...
在早期的Internet Explorer浏览器,包括IE6、IE7和IE8,由于JavaScript的实现和DOM操作的限制,处理页面中的选项卡(tab)切换功能相比现代浏览器更为复杂。这些浏览器并未提供像现代浏览器那样完善的API来支持动态...
**问题描述**:当设置了一个div的`float`属性,并且设置了左右`margin`时,在IE中可能会出现实际距离比预期更大的问题。 **解决方案**: - 将该div的`display`属性设置为`inline`。 **示例代码**: ```html #box...
然而,不同的浏览器对CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(如IE6、IE7、IE8)与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...
本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...
例如,可以通过改变div的`style.display`属性,使其在需要时显示或隐藏。还可以结合事件监听,比如点击按钮触发弹窗。 标签中的“源码”意味着我们可以从提供的链接(由于实际环境中无法访问,此处仅做理论分析)...
超酷炫的div弹出层 可以包含图片 页面及隐藏 兼容IE ff
- `$(selector).show()` 和 `$(selector).hide()`:分别用于显示和隐藏元素。 #### 示例代码分析 ```javascript $(document).ready(function() { // 针对特定的 input 元素绑定点击事件 $("input").click...
这个bug表现为在IE6下,当两个浮动(floated)的div相邻时,它们之间会出现一个3像素的间距,这与在其他浏览器(包括更新版本的IE)中的表现不符。这个问题的根源在于IE6对浮动元素的盒模型处理方式与其他浏览器不同...
在Web开发中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对老旧的Internet Explorer版本,如IE6和IE7。了解和掌握这些兼容性技巧,能有效提升网页在不同浏览器上的表现。 1. **垂直居中...
在早期的Web开发中,IE6浏览器由于其市场份额和用户需求,经常需要特别考虑兼容性问题。"兼容IE6的遮罩层"是一个常见的技术挑战,涉及到网页元素的层叠上下文、透明度处理和CSS hack等知识点。下面将详细阐述这些...
在Web开发过程中,特别是针对早期浏览器如Internet Explorer 6 (IE6) 和 Internet Explorer 7 (IE7) 的支持时,开发者经常会遇到一系列兼容性问题。这些问题往往源自于不同浏览器对CSS规范的不同实现方式。本文将...
IE6和IE7浏览器在处理HTML中空的div元素时有一个特殊的表现,那就是即使div内没有任何内容,它仍然会占据一定的空间,而这种行为与其他主流浏览器(如Firefox、Chrome、Safari等)是不同的。在这种情况下,空div将...
在探讨“div+css浏览器兼容问题”这一主题时,我们首先需要理解,浏览器兼容性问题主要源于不同浏览器对Web标准的解析和实现存在差异。这不仅包括主流浏览器如Chrome、Firefox、Safari、Edge以及IE(尤其是IE6)之间...