CSS hack for IE10, IE11 and webkit browsers

I recently had an issue with IE being a few pixels out from Chrome and other webkit browsers. So just wanted to note the fixes.

Of course I should preface this by saying browser specific targeting should be avoided in place of identifying and fixing the underlying issues,

However in the example I found that IE11 had a problem in rendering the height and width of an element when applying border-radius, so I had to use the work around.

IE10+ hack

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  /* IE10+ specific styles go here */  
}

webkit browser only hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* webkit specific styles go here */  
}

For IE9 only hacks... good luck :) I had no luck with that.