Negative margin causes border to disappear in IE7

Question

Example: http://jsfiddle.net/xUrDc/

I'm trying to surround each li with a border exactly one pixel wide. In order that the lines meet properly, I'm setting margin-top:-1px on each li (Otherwise the border is too thick between each).

When I set my browser to IE7 in debug mode, the border at the top disappears. Can anybody tell me why this might be the case or suggest a better way to achieve the look I want?

Answer 1

Ignoring the possibility of doing it a different way, you can fix IE7 by adding zoom: 1 to ul li .

See: http://jsfiddle.net/xUrDc/1/

Why does this work? In short, it provides a magical property known as hasLayout to the element in IE7, which happens to fix this bug.

More info:What bug does zoom:1; fix in CSS?