Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try Litmus Email Testing or the Campaign Monitor Email Testing tool. If you want to convert any external CSS to inline style, Inline Styler and Emogrifier may come to help. Here goes the FREE tool, post your comments.

Since Internet Explorer8 has just joined the infamous IE family, which added bit of work (chaos) in the compatibility war. We have designed the following tool to show the difference between the "recent" IE versions, namely 6,7 and 8. Hope this would help web developers who care about browser compatibility.

Referenced from MSDN: CSS Compatibility and IE

Show CSS3 Implementations
Show Difference Only
Show All IE versionsHide IE6Hide IE7Hide IE8

@ Rules

	IE6	IE7	IE8
@charset
@import
@media
@page
@font-face
@namespace

Selectors

	Note	IE6	IE7	IE8
.value { sRules }	Class
#value { sRules }	ID
E { sRules }	Type
* { sRules }	Universal
ns|E { sRules }	Namespaced
[att=val] { sRules }	Equality [=]
[att] { sRules }	Existence []
[att|=val] { sRules }	Hyphen [|=]
[att~=val] { sRules }	Whitespace [~=]
[ns|attr] { sRules }	Namespaced
[att^=val] { sRules }	Prefix [^=]
[att*=val] { sRules }	Substring [*=]
[att$=val] { sRules }	Suffix [$=]
E + F { sRules }	Adjacent Sibling (+)
E > F { sRules }	Child (>)
E F { sRules }	Descendant
E ~ F { sRules }	General Sibling (~)
:active { sRules }	:active
:first-child { sRules }	:first-child
:focus { sRules }	:focus
:hover { sRules }	:hover
:lang(C) { sRules }	:lang()
:link { sRules }	:link
:visited { sRules }	:visited
@page :first { sRules }	@page :first
@page :left { sRules }	@page :left
@page :right { sRules }	@page :right
:root { sRules }	:root
:nth-child() { sRules }	:nth-child()
:nth-last-child() { sRules }	:nth-last-child()
:nth-of-type() { sRules }	:nth-of-type()
:nth-last-of-type() { sRules }	:nth-last-of-type()
:last-child { sRules }	:last-child
:first-of-type { sRules }	:first-of-type
:last-of-type { sRules }	:last-of-type
nly-child { sRules }	nly-child
nly-of-type { sRules }	nly-of-type
:empty { sRules }	:empty
:target { sRules }	:target
:not(X) { sRules }	:not()
:enabled { sRules }	:enabled
:disabled { sRules }	:disabled
:checked { sRules }	:checked
:indeterminate { sRules }	:indeterminate
:default { sRules }	:default
:valid { sRules }	:valid
:invalid { sRules }	:invalid
:in-range { sRules }	:in-range
ut-of-range { sRules }	ut-of-range
:required { sRules }	:required
ptional { sRules }	ptional
:read-only { sRules }	:read-only
:read-write { sRules }	:read-write
:after { sRules }	:after
:before { sRules }	:before
:first-letter { sRules }	:first-letter
:first-line { sRules }	:first-line
::before { sRules }	::before
::after { sRules }	::after
::first-letter { sRules }	::first-letter
::first-line { sRules }	::first-line
::selection { sRules }	::selection
::value { sRules }	::value
::choices { sRules }	::choices
::repeat-item { sRules }	::repeat-item
::repeat-index { sRules }	::repeat-index
{ sRule!important? }	!important Declaration
{ list-style : sStyle }	list-style
{ list-style-image : sStyle }	list-style-image
{ list-style-position : sStyle }	list-style-position
{ list-style-type : sStyle }	list-style-type
{ color : sColor }	color
{ background : sBackground }	background
{ background-attachment : sAttachment }	background-attachment
{ background-color : sColor }	background-color
{ background-image : sLocation }	background-image
{ background-position : sPosition }	background-position
{ background-repeat : sRepeat }	background-repeat
{ color-profile : sProfile }	color-profile
{ rendering-intent : sIntent }	rendering-intent
{ background : sBackground1,sBackground2, etc. }	background (multiple)
{ background-clip : sClip }	background-clip
{ background-origin : sOrigin }	background-origin
{ background-break : sBreak }	background-break
{ background-size : sSize }	background-size
{ direction : sDirection }	direction
{ font : sFont }	font
{ font-family : sFamily }	font-family
{ font-size : sSize }	font-size
{ font-style : sStyle }	font-style
{ font-variant : sVariant }	font-variant
{ font-weight : sWeight }	font-weight
{ letter-spacing : sSpacing }	letter-spacing
{ line-height : sHeight }	line-height
{ text-align : sAlign }	text-align
{ text-decoration : sDecoration }	text-decoration
{ text-indent : sIndent }	text-indent
{ text-transform : sTransform }	text-transform
{ unicode-bidi : sAlign }	unicode-bidi
{ vertical-align : sAlign }	vertical-align
{ white-space : sWrap }	white-space
{ word-spacing : sSpacing }	word-spacing
{ font-effect : sEffect }	font-effect
{ font-emphasize : sEmphasize }	font-emphasize
{ font-size-adjust : sSizeAdjust }	font-size-adjust
{ font-smooth : sSmooth }	font-smooth
{ font-stretch : sStretch }	font-stretch
{ hanging-punctuation : sHangingPunctuation }	hanging-punctuation
{ punctuation-trim : sTrim }	punctuation-trim
{ ruby-align : sRubyAlign }	ruby-align
{ ruby-overhang : sRubyOverhang }	ruby-overhang
{ ruby-position : sRubyPlacement }	ruby-position
{ ruby-span : sRubySpan }	ruby-span
{ text-align-last : sAlignLast }	text-align-last
{ text-emphasis : sEmphasis }	text-emphasis
{ text-justify : sJustify }	text-justify
{ text-outline : sOutline }	text-outline
{ text-overflow : sOverflow}	text-overflow
{ text-shadow : sShadow }	text-shadow
{ text-wrap : sWrap }	text-wrap
{ word-break : sBreak }	word-break
{ word-wrap : sWrap }	word-wrap
{ writing-mode : sFlow }	writing-mode
{ content : sContent }	content
{ counter-increment : sCounter }	counter-increment
{ counter-reset : sCounter }	counter-reset
{ quotes : sQuotes }	quotes
{ border : sBorder }	border
{ border-bottom : sBottom }	border-bottom
{ border-bottom-color : sColor }	border-bottom-color
{ border-bottom-style : sStyle }	border-bottom-style
{ border-bottom-width : sWidth }	border-bottom-width
{ border-collapse : sCollapse }	border-collapse
{ border-color : sColor }	border-color
{ border-left : sLeft }	border-left
{ border-left-color : sColor }	border-left-color
{ border-left-style : sStyle }	border-left-style
{ border-left-width : sWidth }	border-left-width
{ border-right : sRight}	border-right
{ border-right-color : sColor }	border-right-color
{ border-right-style : sStyle }	border-right-style
{ border-right-width : sWidth }	border-right-width
{ border-spacing : sSpacing }	border-spacing
{ border-style : sStyle }	border-style
{ border-top : sTop }	border-top
{ border-top-color : sColor }	border-top-color
{ border-top-style : sStyle }	border-top-style
{ border-top-width : sWidth }	border-top-width
{ border-width : sWidth }	border-width
{ caption-side : sLocation }	caption-side
{ clear : sClear }	clear
{ empty-cells : sEmptyCells }	empty-cells
{ float : sFloat }	float
{ margin : sMargin }	margin
{ margin-bottom : sHeight }	margin-bottom
{ margin-left : sWidth }	margin-left
{ margin-right : sWidth }	margin-right
{ margin-top : sHeight }	margin-top
{ padding : sPadding }	padding
{ padding-bottom : sPadding }	padding-bottom
{ padding-left : sPadding }	padding-left
{ padding-right : sPadding }	padding-right
{ padding-top : sPadding }	padding-top
{ table-layout : sLayout }	table-layout
{ border-break : sBreak }	border-break
{ border-image : sImage }	border-image
{ border-radius : sRadius }	border-radius
{ box-shadow : sShadow }	box-shadow
{ bottom : sBottom }	bottom
{ clip : sClip }	clip
{ display : sDisplay }	display
{ height : sHeight }	height
{ left : sPosition }	left
{ max-height : sMaxHeight }	max-height
{ max-width : sWidth }	max-width
{ min-height : sMinHeight }	min-height
{ min-width : sMinWidth }	min-width
{ overflow : sOverflow }	overflow
{ position : sPosition }	position
{ right : sPosition }	right
{ top : sTop }	top
{ visibility : sVisibility }	visibility
{ width : sWidth }	width
{ z-index : vOrder }	z-index
{ overflow-x : sOverflow }	overflow-x
{ overflow-y : sOverflow }	overflow-y
{ orphans : nLines }	orphans
{ page-break-after : sBreak }	page-break-after
{ page-break-before : sBreak }	page-break-before
{ page-break-inside : sBreak }	page-break-inside
{ widows : nLines }	widows
{ fit : sFit }	fit
{ fit-position : sPosition }	fit-position
{ image-orientation : sOrientation }	image-orientation
{ page : sPage }	page
{ size : sSize }	size
{ cursor : sCursor }	cursor
{ outline : sOutline }	outline
{ outline-color : sColor }	outline-color
{ outline-style : sStyle }	outline-style
{ outline-width : sWidth }	outline-width
{ appearance : sAppearance }	appearance
{ box-sizing : sSizing }	box-sizing
{ icon : sIcon }	icon
{ nav-down : sNavDown }	nav-down
{ nav-index : sIndex }	nav-index
{ nav-left : sNavLeft }	nav-left
{ nav-right : sNavRight }	nav-right
{ nav-up : sNavUp }	nav-up
{ outline-offset : sOffset }	outline-offset
{ outline-radius : sRadius }	outline-radius
{ resize : sResize }	resize
{ column-break-after : sSize }	column-break-after
{ column-break-before : sSize }	column-break-before
{ column-break-inside : sSize }	column-break-inside
{ column-count : sCount }	column-count
{ column-gap : sSize }	column-gap
{ column-rule : sRule }	column-rule
{ columns : sColumns }	columns

Values

	IE6	IE7	IE8
<number>
<length>
<percentage>
<integer>
<angle>
<time>
<frequency>
<string>
\code
rect()
url()
counter()
attr()
calc()
<color> (names)
<color> (#rrggbb or #rgb Notation)
<color> (rgb(r,g,b) Notation)
<color> (system colors)
transparent
<color> (rgba(r,g,b,a) Notation)
<color> (hsl(h,s,l) Notation)
<color> (hsla(h,s,l,a) Notation)
auto
inherit
initial