4

我面临一个奇怪的问题。我有一个渐变背景颜色的文档。

<body class="loginbackground">

.loginbackground {
    background: #64889A; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #DCDCDC,  #64889A); /* for firefox 3.6+ */
    width: 100%;
    height: 100%;
}

首次构建页面时，我没有设置文档类型（是的，我的错，但它仍处于 pre-pre-alpha 中！）

我添加<!DOCTYPE html>到我的 html 文件中，然后 bam，背景渐变消失了。

它在 Chrome 和 IE 中运行良好。这仅在 Firefox 中被破坏。我正在使用极光（13a0.2）。如果我删除 line -moz-linear-gradient，则它显示默认背景颜色（无渐变）。

我做错了什么还是实际上是 Firefox 中的错误？

** 更新 ** 如果我给出一个background-size: 1000px 1000px然后它工作，有点。我想给100% 100%or auto，但这不起作用。给出固定尺寸意味着它取决于屏幕分辨率。

4

2 回答 2

4

您的问题是，根据规范，渐变大小框是背景样式所在元素的框。而在标准模式下，你的身高是0，因为你没有设置height: 100%。<html>如果你在身体上加了一个边框，你可以看到这一点。

于 2012-04-24T23:26:17.337 回答
0

尝试用这个变体替换你的css：

background: -moz-linear-gradient(top, #dcdcdc 0%, #64889a 100%);

当我需要跨浏览器渐变时，我去的地方是：http: //www.colorzilla.com/gradient-editor/

于 2012-04-24T18:21:04.367 回答