Question

I have just found something very weird while developing a website. While trying to get a div element to display across the top of the screen, I noticed that I wasn’t achieving a desired result in any browser except for old versions of IE. In order to test some different code, instead of deleting the faulty line, I used ‘//’ to comment it out (I’m not really even sure if that works in css) but what happened was, the compatible browsers used the uncommented code, while IE used the code marked by ‘//’. here is the code:

#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block;       //    browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}

so basically, it seems as though // can be used to instruct newer browsers to ignore specific lines of code, and instruct older versions of IE to use it? If this is common practice someone please let me know. it sure makes developing for older browsers a hell of a lot easier

Answer 1

// is not a valid CSS comment.

Browsers that parse CSS properly will ignore //position because //position is not a valid property name (details are here, property -> IDENT S* -> follow it through).

This only works in IE7 due to its well known bug of accepting properties with junk prepended to them.

It’s not just // that works. IE7 will have red text here:

body {
    !/!*//color: red;
}

This is most typically exploited with *, for example *display: inline; as part of the display: inline-block workaround for IE7.