CSS Line Height Specification with IE 6 Font Styles/Sizes Disabled

Internet Explorer users can disable author css-specified font styles and sizes via Tools -> Internet Options -> Accessibility. With these two options deselected, the samples below will render as described afterward. Unfortunately, neither of these options disable css-specified line-height. With these two options enabled, pt-specified line-height survives, causing overlapping text in most circumstances in which the rendered text size is larger than the author specified size.

As long as the options described above are not selected, when rendered according to the css 2.1 spec, the 200% text in the second div div, that for which line-height of the parent is specified in pt, will overlap, the child div being 1/2 the height of its containing div; while the first div div will be 2/3 the height of its containing div, and its text won't overlap. The overlapping text in the latter div div is because the spec requires the calculated line-height specified in pt be inherited by the children. In contrast, it is <number> itself that is inherited by the children, which allows the line-height specified to be applied in reference to the font-size of the child div instead of the ancestor.

Switch from pt to px

Parent page

CSS Line Height Specification with IE 6 Font Styles/Sizes Disabled

div {font-size: 9pt; line-height: 1.2}; div div {font-size: 200%}

div {font-size: 9pt; line-height: 9pt}; div div {font-size: 200%}