Question

非常奇怪的问题。导航栏背景图像在除Safari之外的所有浏览器中都正常加载。

以下是我正在使用的代码：

#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}

Answer 1

Safari 6.02中的CSS 3背景速记isn't supported（由于它不起作用，我假设你正在使用它）。您可以使用CSS 2.1 background简写语法，但需要将background-size属性删除为自己的声明：

#navbar {
    width: 100%;
    height: 53px;
    margin-top: -10px;
    position:relative;
    z-index:1;
    background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
    background-size: 100% 63px;
}

Answer 2

我遇到的问题是我无法将背景图片属性应用于Safari中的<main>元素。来发现Safari（当前）不会将<main>识别为块元素，就像HTML5的许多实现一样，因此将<main>设置为display:block就可以了我。希望这会有所帮助。

背景图像未在Safari中加载

2 个答案: