是什么导致该背景图像“不正确”显示？在 Opera 和 Firefox 中？

Question

我知道这可能是我做错的事情，所以请不要因为帖子标题而焚烧我。

我正在尝试使用 HTML 5/CSS3 构建一个小型个人网站。我已经检查了 w3c 验证器，并且站点和 CSS 文件完全符合验证器（但是验证器附加了一个警告，表明它可能并不完美）。

没有图片我不知道如何解释，所以这里有 Chrome/Opera/Firefox 的比较：

因此，您可以看到在 Chrome 中背景图像是如何在一个不重复的片段中，而在 Opera/奇怪的是，Firefox 图像被分解并放置得略有不同。

我确信这是由于我的错误造成的，但我根本没有运气弄清楚为什么该图像在 Opera 和 Firefox 中被破坏。

这是与此问题相关的 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;
}

Answer 1

明白了：你需要给 hgroup display: block 。

编辑：请记住，大多数浏览器不知道新的 HTML5 元素，因此它们缺少所有默认样式。

Answer 2

您需要将定位子元素的父元素设置为 relative 才能进行定位。

hgroup{
  position: relative;
}

您的 h1 需要宽度和高度，否则 display: block 有点毫无意义。

这是最让我惊讶的两件事:)

Answer 3

刚刚在 Chrome 和 Firefox 中查看，它们显示的内容与您的错误图片相同。

看一下这里：HTML5浏览器支持清单，似乎Firefox和Opera不支持还支持所有 HTML5 属性，所以总是会出现一些奇怪的问题。浏览器还不知道 HTML5 元素的所有默认样式，因此更容易出现奇怪的错误。除了 DavidYell 的答案之外，想不出任何其他修复方法，CSS 中的一切似乎都很好。

Answer 4

背景图像对齐 CSS 尚未在所有浏览器上准备就绪。
就好像您只有：

.content hgroup 
{
background: url("Header_Flat.png") no-repeat;
etc.

由于 hgroup 没有设置大小，当您在不同的缩放下使用不同的浏览器时，您的背景图像将浮动。

如果您能够设置 hgroup 的大小，您可以将 .png 设计为 hgroup 的大小，透明且蓝色条纹与左上角对齐。

我也期待所有浏览器都能完全支持 CSS3。

有很多效果在某些浏览器中看起来很酷，但在其他浏览器中看起来却很糟糕。我个人更喜欢 1)Firefox 2)Safari