Using EMs and %, avoiding microscopic fonts in IE

Based on this page in the CSS-discuss wiki.

Text outside P. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming id Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text inside P. Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam. Bis nostrud exercitation ullam modo consequet.

Text outside P, inside an embedded table.

Text inside P, inside an embedded table.

Text outside P, inside a table. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming id Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua.

Text inside P, inside a table. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent.

CSS

	BODY	 {
		font-family: Verdana;
		font-size: 76%;
		}

	TD {
		/*font-size: 76%;*/		/* Fixes IE6 in Quirks mode, and Opera 5. Breaks IE6 in Standards mode */
		}

	/*/*/
	TD {
		\font-size: 76%;
		f\ont-size: inherit;
		}
	/* Hack for IE5, hidden from NN4 & Opera5 */

	H1 {
		font-size: 2.6em;
		}

	P {
		font-size: 1em;
		}

	TABLE {
		/*/*/f\ont-size: inherit; /* Hide from NN4 and Opera5 */
	}

Browser (Win2000)	Doctype	Result
IE 6	HTML4 Transitional Quirks mode	Perfect, with hack that's incompatible with IE6 Standards mode.
IE 6	HTML4 Transitional Standards mode	Perfect
IE 6	XHTML1 Transitional Quirks mode	Perfect, with hack that's incompatible with IE6 Standards mode.
IE 6	XHTML1 Transitional Standards mode	Perfect
IE 5.5 (Win98)	HTML4 Transitional	Perfect (but requires hack)
IE 5.5 (Win98)	XHTML1 Transitional	Perfect (but requires hack)
Gecko (Moz 1.4)	XHTML1 Transitional (standards or quirks)	Perfect
Gecko (Moz 1.4)	HTML4 Transitional (standards or quirks)	Perfect
Opera 7.0	HTML4 Transitional Quirks mode	Perfect
Opera 7.0	HTML4 Transitional Standards mode	Perfect
Opera 7.0	XHTML1 Transitional Quirks mode	Perfect
Opera 7.0	XHTML1 Transitional Standards mode	Perfect
Navigator 4.7	XHTML1 or HTML4	Tables don't inherit anything from BODY; BODY text < BODY P text
Opera 5.12	XHTML1 or HTML4	Nested tables don't inherit. TABLE font-size:inherit causes illegibly small fonts. Can be fixed with hack that's incompatible with IE6 Standards mode

IE 6 font size normal screenshot

IE 6 font size smaller screenshot

IE 6 font size larger screenshot

Version history

Date	Notes
23/08/2003	First tests (not including IE5). Added link to this page from CSS-discuss wiki
31/08/2003	Tested on IE5.5/PC. Added SBMH for TD font-size. This fixes it in IE5.5 (quirks and standards). Also found hack for IE6 Quirks and Opera 5, but this is incompatible with IE6 Standards mode.