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?
Ignoring the possibility of doing it a different way, you can fix IE7 by adding
zoom: 1
toul 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?