Negative margin causes border to disappear in IE7

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 开发者_JAVA百科might be the case or suggest a better way to achieve the look I want?

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?