是什么导致此背景图像在 Opera 和 Firefox 中“错误”显示？答案

【问题标题】：What's causing this background-image to display "incorrectly" in Opera and Firefox?是什么导致此背景图像在 Opera 和 Firefox 中“错误”显示？
【发布时间】：2010-05-12 08:21:02
【问题描述】：

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

我正在尝试使用 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;
}

【问题讨论】：

删除 text-shadow 属性后问题会消失吗？
在 FireFox 中，按 CTRL+SHIFT+J 打开错误控制台。清除一切。现在查看您的页面（或刷新它）并查看警告选项卡包含的内容。 FireFox 是否抱怨无法解析 CSS 或 HTML？
在清除和刷新页面后，Firefox 的错误控制台中完全没有任何内容
你有网址吗？在 Firebug 中查看整个上下文会很有帮助。
sukasa.kicks-ass.org这只是一个家庭连接，因此加载整个站点可能需要1-2秒。

标签： html css firefox google-chrome opera

【解决方案1】：

知道了：你需要给 hgroup display: block。

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

【讨论】：

【解决方案2】：

您需要将定位的子元素的父元素设置为relative 才能使定位工作。

hgroup{
  position: relative;
}

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

这是最让我印象深刻的两件事:)

【讨论】：

我删除了 h1 的 css def，因为 display:block 无论如何都是默认的，它是剩余的，什么也没做。我按原样重新添加它并尝试了您的第一个建议，但什么也没做。再次删除h1的css并检查，仍然没有。
如果您有 absolute 定位元素，您只需将父元素设置为position: relative，这些元素应该相对于该父元素定位。其他相对定位的元素不需要。此外，绝对没有理由需要设置块元素的宽度和高度。
啊，很公平，这是我从 CSS 验证器中获得的，也许我正在考虑需要宽度和高度的浮动元素

【解决方案3】：

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

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

【讨论】：

当您说它们显示相同时，您的意思是与它们各自的参考图片相同还是与单个“错误”图片相同？
对不起，所有浏览器都乱了，不是一张图片，而是切碎的。

【解决方案4】：

背景图像对齐 CSS 并非在所有浏览器上都准备好。就好像你只有：

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

由于hgroup 没有设置大小，因此当您使用不同的浏览器以不同的缩放比例时，您的背景图像会四处浮动。

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

我也期待在所有浏览器中全面支持 CSS3。

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

【讨论】：