Tagged As:

IE6

IE6 更新 DOM 树 鬼影 GHOST 固定宽度

Categories: BrowserAuthor leakonPosted on 2 Comments on IE6 更新 DOM 树 鬼影 GHOST 固定宽度

用JavaScript更新DOM树的节点，先用 element.innerHTML = ”; 把节点内容清空，然后再用 element.appendChild(newNode) ; 插入新节点。 本来操作没什么问题，但是在IE6下，完成 DOM 更新后，附近区域内容的显示会出现问题。 现象是，当光标移动到某些链接上时，部分相邻的内容突然消失！ 如果在消失的部分点击一下，那部分内容就恢复正常显示，然后上述问题就彻底消失。 以前写过blog说明这类问题的解决办法，不过那次是因为li元素宽度超过了父层容器。我记得好像是用zoom:1的样式表来处理的，详情请看：IE6 float […]

IE6 float 显示异常 消失问题 解决方法

Categories: 原创Author leakonPosted on 1 Comment on IE6 float 显示异常 消失问题 解决方法

上一篇日志中写了 IE6 对 float 元素显示不正常的问题，现在找到了一个解决办法。 测试了很多次，发现跟 margin 和 padding 没有直接的关系，本质的问题根源在于，包含 float 元素的外层 div，没有设置足够的宽度和高度，也就是说，这个容器没有足够的空间用来显示内部所有的 float 元素。 […]

IE6 float 异常 消失

Categories: 原创Author leakonPosted on 4 Comments on IE6 float 异常 消失

IE6 浏览器对 float 属性的元素显示不太正常，经常遇到的情况是，打开页面，发现某个区域的内容是空的，什么都不显示，但鼠标移动到那个区域，或者附近的一些区域时，那个空的区域立刻显示出原有的内容。 另一个 case 可以称之为“鬼影”，现象是，某串文字，会在 2 个位置同时显示，如果有 hightlight 效果，那么任凭你把光标放到二者任意一个上面，另一串文字也会立刻高亮。 以前对这个问题很抓狂，也没有总结出一个很好的解决方法。 今天又碰到类似的问题，查了一下 Google，有人给出一个结论，当某个元素有 float […]

IE6 DIV 覆盖 Select 元素 Form 控件

Categories: 转载Author leakonPosted on 5 Comments on IE6 DIV 覆盖 Select 元素 Form 控件

本为讲述了如何解决在IE6下动态创建的DIV等Element会被Select等Form控件覆盖的问题。 下拉框，即html的SELECT元素，.net设计时的DropDownList，是html中的windowed element，尤其ie6之后，几乎是唯一的windowed element（还有popup等少量极少用的的）。 普通的元素，textbox, div, table……这些，属于windowless element，它们之间互相遮盖的情况由z-index决定，在它们之上，是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。 这个问题广泛存在于各种弹出式控件的使用之中，比如日历控件等。 如果要显示div，以前的做法是，动态的，在显示的时候，让div区域的select不可见，div消失的时候，再恢复这些select元素。这种做法比较奇怪，因为它严格上并不是“遮盖”了select，而是，让她整个消失了，如果calendar弹出元素只是应该遮盖select元素的一部分，但select却整个不见，用户也许会觉得奇怪；做起来也麻烦，要用js逐一判断各select的位置。 ie5.5之后，有一个新的小技巧，称之为“iframe shim”（iframe加塞:p），可以真正的“遮盖”select元素。 它利用了一种特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但从5.5开始，iframe就是普通的windowless […]

IE6 CSS Hack

Categories: CSS DevelopAuthor leakonPosted on 3 Comments on IE6 CSS Hack

最近在做一些UT的工作，写一些HTML和CSS，又遇到了一直很头疼的浏览器兼容问题。 主要就是让人讨厌的IE6，总是需要进行很多特殊的处理。 遇到表格类型的HTML区域，我一直觉得用table是最合适的，解决局部的单层表格，table是最方便的，HTML语言加入table这个标签的初衷就在这里。 不过因应用需要，我这回必须要用div实现table的布局，只能硬着头皮搞了。 对表格区域，我用ul标签，用li作为每行的容器。 在每个li标签中，用div作为列单元的容器。 这会遇到几个问题，同时也有一些优点吧： （缺点）列的宽度必须用样式来定义，比如每行相同的列单元，都必须使用相同的class，在css中给这个class定义绝对宽度，用width=240px这类的语句，代码冗余比较多 （缺点）每个div必须添加float:left的css定义，因为div是块状元素，默认是按行竖着排列的，设为浮动元素后，才可以横着排列 （缺点）float:left这个属性的排列方式，我总结的是按左上原则，可以理解为左上角是引力中心，把每个float元素都紧紧地吸附着，如果右侧有空间，就顺序排列在右侧，如果没空间了，就到下面一行尽量靠左的位置开始排列……，因此如果宽度不够，改行左边单元的高度又高于其他单元，那么最右侧的单元会卡在左边的单元右侧，呃，可能不好理解，回头我给个图，专门说一下这个规则 （缺点）li的高度默认不是自适应，当div单元的高度很大时，会突破li容器，影响下一行li的显示，呃……不过这个是有办法解决的，这篇文章主要就是来说明这个解决办法 （优点）div对浏览器来说就是一个简单的元素，浏览器每读完一个div，就可以立即显示，不必等待所有html代码都下载完才画出页面，这也是大家不喜欢table的主要原因 （优点）每行都有自己单独的列元素，每列的宽度可以不一致，这点table很难做到，即便能做到，也是用非常绕弯的方法，而用li+div来解决，就很灵活 看似缺点比较多，不过缺点都可以解决。 下面列举几个方法，就不一一对应了，其实道理都是相通的： […]