July 27th, 12:00pm 0 comments

Adjacent Sibling Selector Bug in IE7

I recently ran into a bug on Internet Explore 7 that was driving me nuts. After hours of debugging, I finally found the solution.

IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:

CSS

Markup with comment

The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.

Media_httpexamplesonc_kmxiy

Markup without comment to make it work in IE7

Posted