CSS is used to control the layout of the page and styling of page elements, text and images – different browsers interpret CSS differently so CSS hacks and browser specific CSS commands are used to try to ensure websites appear similar across browsers. It is best to avoid using hacks wherever possible but sometimes they are necessary.
Below are a list of hacks for individual browsers including IE 7:
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE7 only
*+html
All except IE6 and IE7
*|html
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}
To use these selectors, place the code in front of the style. E.g.:
#content-box {
width: 300px;
height: 150px;
}
/* overrides the above style and changes the width to 250px in IE 6 and below */
* html #content-box {
width: 250px;
}
A full CSSCheatsheet is available as a PDF (from http://acodingfool.typepad.com/blog/css-cheat-sheet.html)
CSS Hacks & Issues
8 helpful solutions which we find essential when designing with CSS.
New CSS commands for Internet Explorer 7
There are a small handful of new CSS commands that you can now use for Internet Explorer 7.
CSS Vertical Centering
Centering content vertically within a fixed height container.
