<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Background:inherit doesn't reset the background color</title>
<style type="text/css">
div, h1 { margin-bottom:30px; margin-left:auto; margin-right:auto; width:80%; border:4px solid;}
p {font: bold 16px monospace;}
div.test { background: lightgreen; color:green;}
h1 { background-color: pink; }
h1#test { background: inherit !important; }
</style>
</head>
<body>
<div class="blurb">
<p>Affected Browsers: Safari 2.0, Windows Internet Explorer 6 SP2</p>
<hr>
<p>Bug Description: On the Affected Browsers, if a rule sets the 'background-color' of an element, this color cannot be overridden by 'background:inherit' declarations. </p>
<hr>
<p>Example: With the following code, the background color of H1 elements stays pink, no matter what background color the parents have:<br>
H1 { background-color: pink; }<br>
H1 { background: inherit; }
</p>
<hr>
<p>Work-around: The 'background-color' can only be overridden by another 'background-color' declaration, or by a 'background' declaration that does specify a color.</p>
<hr>
This is in contradiction with the CSS2 specification which says:
<ul>
<li>The <a href="http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background">'background'</a> property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.
</ul>
</div>
<div class="test">
This DIV has a green background.
<h1 style="background: inherit;">This header should have a green background (not pink) but the inline style rule is ignored on the Affected Browsers.</h1>
The DIV continues here.
<h1 id="test">This header should have a green background (not pink) but the !important rule is ignored on the Affected Browsers.</h1>
The DIV continues here.
<h1 style="color:red">This header has a pink background and that's good.</h1>
</div>
</body>
</html>
Codebase Browser
chromium