是什么导致这个背景图像在Opera和Firefox中“不正确地”显示?

我知道这可能是我做错了什么,所以请不要因为线程标题而烧掉我。

我试图用HTML5/CSS3建立一个小型的个人网站。我已经使用W3C验证程序进行了检查,站点和CSS文件完全符合验证程序的要求(但是验证程序附带了一个警告,说明它可能不完美)。

我不知道如何在没有图片的情况下解释它,下面是chrome/opera/firefox的比较:

所以,你可以浏览一下,在Chrome中,背景图像是如何在一个不重复的片段中出现的,而在Opera/FireFox中,奇怪的是,图像已经被分解,并且放置方式略有不同。

我相信这是由于我自己的错误造成的,但我完全没有运气弄清楚为什么在Opera和Firefox中图像会被破坏。

以下是与此问题相关的CSS:。

内容窗格*/ 内容 位置:绝对; 左:220px; 宽度:800 px; 顶部:80px; 最小高度:550px; 背景色:RGBA(8,12,42,0.85); } /*标题* 内容组 { 背景:url(“header_flat.png”)无重复左上角; 最小高度:38px; 左侧填充:28px; 文本阴影:0 0 8px ffa9ff; 颜色:布莱克; 文字装饰:无; } .含量h1组 { 显示:块; } .含量组别H3 { 显示:内联; 职位:相对; 顶部:-12px; 左:20px; 文本阴影:0 0 6px aff9ff; } .含量H组H4 { 显示:内联; 职位:相对; 顶部:-12px; 左:20px; 字体大小:XX小; 文本阴影:0 0 6px aff9ff; } < /代码>

和HTML:

<hgroup>
<h1>新建网站!/lt/H1& gt;
<H3>现在和布卢姆在一起!/lt/H3>
<h4>-于2010年5月11日星期二发布
&集团;
< /代码> 

有人知道我做错了什么吗?

< H2>编辑< /H2>

我稍微改变了一点CSS,它半修复了图像(我不明白为什么)和错误的对齐方式(我还没有注意到)。



更改的css defs如下:

/*头*/
内容组
{
背景:url(“header_flat.png”)无重复左上角;
最小高度:38px;
职位:相对;
文本阴影:0 0 8px ffa9ff;
颜色:布莱克;
文字装饰:无;
}

.含量h1组
{
职位:相对;
左:28 px;
}

.含量组别H3
{
显示:内联;
职位:相对;
顶部:-12px;
左:48 px;
文本阴影:0 0 6px aff9ff;
}

.含量H组H4
{
显示:内联;
职位:相对;
顶部:-12px;
左:48 px;
字体大小:XX小;
文本阴影:0 0 6px aff9ff;
}
< /代码> <线程标题。


我试图用HTML5/CSS3建立一个小型的个人网站。我已经使用W3C验证程序进行了检查,站点和CSS文件完全符合验证程序的要求(不过,验证程序附带了一个警告,指出它可能并不完美)。

我不知道如何在没有图片的情况下解释它,下面是chrome/opera/firefox的比较:


所以,你可以浏览一下,在Chrome中,背景图像是如何在一个不重复的片段中出现的,而在Opera/FireFox中,奇怪的是,图像已经被分解,并且放置方式略有不同。

我相信这是由于我自己的一个错误,但我完全没有运气弄清楚为什么图像在Opera和火狐中被破坏。

以下是与此问题相关的CSS:

/* Content Pane */         
.content
{           position: absolute;
            left: 220px;
            width: 800px;
            top: 80px;
            min-height: 550px;
            background-color: rgba(8,12,42,0.85);
}

/* Headers */
.content hgroup 
{
            background: url("Header_Flat.png") no-repeat left top;
            min-height: 38px;
            padding-left: 28px;
            text-shadow: 0 0 8px #FFA9FF;
            color: Black;   
            text-decoration: none;  
}

.content hgroup h1 
{
            display: block;
}

.content hgroup h3
{
            display: inline;
            position: relative;
            top: -12px;
            left: 20px;
            text-shadow: 0 0 6px #AFF9FF;
}

.content hgroup h4
{
            display: inline;
            position: relative;
            top: -12px;
            left: 20px;
            font-size: xx-small;    
            text-shadow: 0 0 6px #AFF9FF;
}


和HTML:

<hgroup> 
    <h1>New Site!</h1> 
    <h3>Now with Bloom!</h3> 
    <h4> - Posted Tuesday, May 11th 2010</h4> 
</hgroup>


有人知道我做错了什么吗?

编辑

我稍微改变了一点CSS,它半修复了图像(我不明白为什么)和错误的对齐方式(我还没有注意到)。



更改的css def如下:

/* Headers */
.content hgroup 
{
            background: url("Header_Flat.png") no-repeat left top;
            min-height: 38px;
            position: relative;
            text-shadow: 0 0 8px #FFA9FF;
            color: Black;   
            text-decoration: none;  
}

.content hgroup h1
{
            position: relative;
            left: 28px;
}

.content hgroup h3
{
            display: inline;
            position: relative;
            top: -12px;
            left: 48px;
            text-shadow: 0 0 6px #AFF9FF;
}

.content hgroup h4
{
            display: inline;
            position: relative;
            top: -12px;
            left: 48px;
            font-size: xx-small;    
            text-shadow: 0 0 6px #AFF9FF;
}