2

Firefox 有一个关于背景附件和背景大小的奇怪错误。我称它为错误，我怀疑它不是，但这呈现了我认为它应该在其他主要浏览器中的方式（我认为强调）。所需的效果是将垂直重复背景的大小调整为 100% 宽度，同时保持图像比例。

这是我的原始 CSS，在这个版本中，背景不会为 firefox 渲染（即使使用 firefox 特定的背景标签）。

body {
    background: #000 url('../background.jpg') left top repeat-y;
    background-attachment: scroll;
    background-size: 100% auto;
}

更改background-attachment: scroll;为background-attachment: fixed;会导致背景呈现，但不希望出现“浮动背景”行为。

[更新]

删除背景位置会导致图像再次正确渲染。

例如

body {
    background: #000 url('../background.jpg') repeat-y;
    background-size: 100% auto;
}

这实际上是一个有问题的修复，因为我的位置值实际上是“左 113 像素”。我可以通过将背景应用于站点标题下方的包装 div 而不是 body 元素来解决此问题，但事实仍然是 Firefox 无法使用 background-size: 100% auto; 渲染背景图像；当使用位置值并且附件是滚动时。

[更新 2]

我意识到只有在存在额外的 CSS 时才会出现该错误。这并不是说额外的 CSS 有问题（不是），而是说这个 Firefox 特定的渲染错误是由它引起的。

额外的 CSS（用于创建灵活的 100% 高度的布局）

html {  width: 100%;    height: 100%;   position: absolute; }

以及完整的正文 CSS 来复制错误

body  {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #000 url('image.jpg') top left repeat-y;
    background-size: 100% auto;
}

[解决方案] 我通过立即在正文中创建一个额外的包装 div 并在此处附加背景而不指定位置属性来解决我的问题。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是因为我现在有一个额外的包装器，我可以继续从 中删除位置、高度和宽度属性html，渲染错误并允许我设置背景的位置。

4

1 回答 1

1

我通过立即在正文中创建一个额外的包装 div 并在此处附加背景而不指定位置属性来解决我的问题。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是因为我现在有一个额外的包装器，我可以继续从 html 中删除位置、高度和宽度属性，渲染错误并允许我设置背景的位置。（请参阅我原来的问题中的更新 2）

于 2013-04-03T16:20:30.693 回答