Firefox/Opera Scrollbar fix in CSS

Annoying behavior in FF: when navigating between page with height<100% and page with height>100% you will experience a horizontal shift in layout caused by added vertical scrollbar. This is a very nice and simple fix that enables a vertical scrollbar holder at all times.

html {
  overflow-y: scroll;
}

CSS Browser Detection

.myclass {
  color: red;     /* All browsers [Target: FF,NS] */
  _color: green;  /* IE6- [Target: IE6-] */
  .color: blue;   /* IE7, IE6- [Target: IE7] */
}
body:last-child:not(:root:root) .myclass {
  color: purple;  /* Safari, Konqueror [Target: Safari, Konqueror] */
}

For IE8 You can just use meta tag to make it behave like IE7 (Facebook, Google are using this technique)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Inline Block

Elements may appear inline, yet retaining box models of block elements:

/* FF,NS */
html>body .inline-block {
  display: -moz-inline-box; /* [FF3]+ */
  display: inline-block; /* (FF3)- */
}

/* Safari, Webkit, Opera */
.inline-block {
  position: relative;
  display: inline-block;
}

/* (IE7)- */
/* to inline does the trick. */
* html .inline-block {
  display: inline;
}

/* [IE7]+ */
*:first-child+html .inline-block {
  display: inline;
}