Inheritance in IE6 & IE7

IE6 + IE7 inheritance problems

Introduction

IE6 + IE7 ignore values which should be inherited from cleanslated styles and instead inherit from the host stylesheet.
E.g.

.host {
  color: red;
}
.cleanslate {
    color: inherit !important;
}
.guest {
    color: black !important;
}

In the case of this example, inheritance works in such a way that all guest elements (which are children of .cleanslate) inherit the color black. However, IE6 + IE7 ignore the inherit values in cleanslate.css and guest elements instead inherit from the host stylesheet – the color of the guest content should be black but in IE6 + IE7 it is the same color as the host content: red.

Details

The following properties have an ‘inherit’ value assigned to them in cleanslate.css: colordirectionfont-familyfont-sizefont-weightline-heightlist-style-typetext-aligntext-decoration
These properties do not get cleanslated in IE6 + IE7: if values for these properties are declared in the host stylesheet then guest styles will inherit their values from the host. h1. Workaround
The only viable workaround for this problem that we’ve been able to identify thus far is to explicitly state for the benefit of IE6 + IE7 new values for all inherit properties for all elements in your guest content.
E.g.

.host p {
    color: red;
}
.cleanslate {
    color: inherit !important;
}
.guest {
    color: black !important;
}
<!--[if lte IE 7]>
.guest p {
    color: black !important;
}
<![endif]-->

Further research

A workaround is currently being investigated which is to include a conditional call to an IE6/7 specific stylesheet which contains expressions which simulate inheritance.
E.g.

.cleanslate h1 {
  color:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.color: 'black') !important;
}

However, while this approach works in principle a way to append !important to IE6/7 specific styles generated by these expressions has not yet been identified.

Link to question on Stack Overflow