0

我有一个可以动态设置背景颜色的页面。在某些情况下，我有子 div，我想使用 background-color:inherit 来保持它们与主体颜色相同。

我发现当主体背景颜色发生变化时，继承的颜色并没有一致地级联。在 Firefox 中似乎没问题，但在 Chrome 或 IE 中却不行。

在 Firefox 中，它始终更改这两个元素。在 chrome 和 IE 中，结果似乎各不相同，但是如果您单击背景已经是的颜色（例如，一切都是蓝色的，单击“蓝色”按钮），然后单击另一种颜色，它似乎会一直中断。

（我确实意识到在这个例子中不需要继承的颜色，但是我只是想用尽可能少的代码来演示这个问题。）

http://jsfiddle.net/48HBe/2/

如果这只是一个浏览器，那么我会怀疑这可能是一个浏览器问题，但由于它似乎会影响 Chrome 和 IE，我想知道我是否期望浏览器的渲染有一些不合理的地方，以及我是否应该使用另一种方法?

4

2 回答 2

2

您的代码似乎在 Chrome 中运行良好，无论如何如果问题与 IE 有关，我会尝试不同的方法。而不是更改单个 css 属性，只需尝试更改body元素的类名，就像在这个示例小提琴中一样：http: //jsfiddle.net/48HBe/3/

CSS因此变成

body, body.blue { background-color:blue; }
body.green { background-color:green; }
body.red { background-color:red; }

js代码很简单

...
var b = document.body;
$("#RedButton").click(function()   { b.className = 'red';   });                  
$("#GreenButton").click(function() { b.className = 'green'; });                  
$("#BlueButton").click(function()  { b.className = 'blue';  });

这样做可以更好地分离逻辑和表示，并且可以在 css 中更改更多样式属性（而不是在 js 代码中）

于 2012-06-27T10:43:38.810 回答
0

我删除background-color:inherit;了它，它完成了工作。

于 2012-06-27T10:44:53.723 回答