IE’s Disappearing, Reappearing, Broken Borders

http://hi.baidu.com/yaoyingying/blog/item/5d8b33c770345fd5d1006033.html

_蒹葭人生_百度空间

(I just added a style to the allborder div:

style="height:100%;" , HL 20101117)

What do you do when an element's border is broken in Internet Explorer? Where half of it is there, but half of it is not; where refreshing the page might clear it up, but might not; where highlighting text inside the element might also clear it up, but then again, might not…

There's a documented bug in IE 6 called the peakaboo bug – read about that here – but I've experienced this problem in IE 7 as well.

The Problem

What I've experienced is that IE will render a page (that appeared beautifully in Mozilla browsers) with some element's border broken. IE would display only parts of the border, a little here and a little there. And if I highlighted text within that content block, it would join up all of the broken border lines so that the entire border was displayed. The image to the left highlights the right-side border of the element block; that border shouldn't be patchy.

The blurred text is part of a site map – a horizontal rule marks the sections and the entire content area has a light gray border. As you can see, the broken borders in IE only appear in positions vertically even with the content of each section of the site map. Each of those sections is a group of left-floated <ul> elements – it's a big site map!

So I suspected the problem occurred somewhere in those floats, but didn't know why.

The Solution

The root of the problem is whether or not an element "has layout." Now, "layout" is a completely made-up, IE-specific attribute not attended to in any manner by the other browsers. It's bunk. But it provides the solution to the broken borders issue. (You can read more on hasLayout here if you'd like.)

To enforce proper border behavior in IE, the floated elements need to "have layout." If validation doesn't matter, the quickest solution may be to add "zoom:1″ to the element. If validation does matter, you can give an element layout by setting "position:absolute" or assigning the "height" or "width" attributes something other than auto.

What's worked for me? Find the element that is actually causing the rendering problem by experimenting with adding a "zoom:1″ style to different elements – start with the element with the broken border, sure, but if that doesn't work try assigning "zoom:1″ to some of its child elements or neighboring elements. Once you've located the element that needs layout, you can replace "zoom:1″ with a specific height or width value – then the problem is solved and your CSS validates.