Question

我刚刚发现，当我尝试使用YUI更改background-color身体时，它在FF5和Opera中不起作用，但在IE和Chrome中有效。但是，如果我为background设置颜色值，它可以在FF和Opera中使用。我认为background-color只是background的某种专业化。哪一个可以在所有浏览器中安全使用？有问题的代码可以在这里看到，background or background-color? Which one is safe to use?，我仍然有理解YUI如何处理事件的问题。我还在此处使用修改过的代码http://www.kumarchetan.com/yui-module.html托管了此页面，尝试使用IE，Chrome，FF和Opera访问此页面，并注意值在不同浏览器中的变化情况。

Answer 1

这是因为YUI CSS reset设置background元素上的html属性而不是body，因此如果要指定不同的页面背景颜色，请执行此操作为html。它与background-color和速记background之间的任何兼容性问题无关，因为所有浏览器都完全支持两种属性（无论如何都是CSS1版本）。

编辑：哦，你的意思是你在使用YUI的JavaScript API ......在这种情况下，它与DOM样式属性存在差异。实际上，您必须使用camelCase表示法来实现跨浏览器兼容性（这不仅适用于YUI，而是适用于DOM）。 IE和Chrome恰好也支持带连字符的属性名称。

Answer 2

要解决您的问题，请添加此CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%
}

html和body不占用100％的高度，这是处理mousemove事件所需的。根元素is handled specially的background，但这与100％高度不同。

浏览器之间行为不一致的原因可能与@ BoltClock的编辑有关，也可能与您的页面使用Quirks Mode的事实有关，因为您没有doctype。将其添加为第一行：

<!DOCTYPE html>

Answer 3

除非您设置图像和颜色，否则两者之间没有真正的区别。如果您只设置一件事，那么您也可以使用background。

Answer 4

它们都可以在所有浏览器中安全使用。

background可以设置所有子属性，例如background-color, background-image, background-position等。

所以不要设置

background-color: #fff; /* white */
background-image: url(path/to/image.png);
background-repeat: repeat; /* or repeat-x, repeat-y, none */
background-position: top center; /* other options include bottom, right, left, along with pixel values and percentages*/
background-attachment: scroll; /* or fixed */

你可以写 background: #fff url(path/to/image.png) top center fixed;

Answer 5

+1给了BoltClock的回答，因为在这种情况下这可能是正确的，但是我最近在不同的解决方案中遇到了类似的情况，所以我想我会分享。

就我而言，有问题的元素有渐变背景：

background: -moz-linear-gradient(top, #c2c2c2, #ffffff);

设置background-color对此元素没有影响，因为渐变优先于颜色。我不得不使用background覆盖它。

背景或背景颜色？哪一个可以安全使用？

5 个答案: