Question

上周，我为音乐事业编写了此网站的代码：http://academy.young1.org。

它在ie10和chrome中起到了很大的作用，我正忙着向大家展示它，但是当我切换到ie8时，我突然意识到我的所有背景图像都消失了。

还有其他一些小问题（例如顶层菜单的文本对齐，'联系'页面和WMU Slider Jquery插件上的分页）但背景图片问题最让我烦恼！

我正在使用css：'body {background：url（“img / yourimagehere”）; ''语法。

这是我的HTML：

<div class="header">

        <div class="container_16 clearfix">
            <ul class="nav grid_16 alpha">
                <li><a class="<?php if ($section == "Home") {echo "here"; } ?>" href="index.php" accesskey="1"> Home </a></li>
                <li><a class="<?php if ($section == "About Us") {echo "here"; } ?>" href="about_us.php" accesskey="2"> About </a></li>
                <li><a class="<?php if ($section == "What We Do") {echo "here"; } ?>" href="what_we_do.php" accesskey="3"> What We Do </a></li>
                <li><a class="<?php if ($section == "Enrolement") {echo "here" ; } ?>" href="enrolement.php" accesskey="4"> Enrolement </a></li>
                <li><a class="<?php if ($section == "Contact Us") {echo "here" ; } ?>" href="contact.php" accesskey="5"> Contact Us </a></li>
                <!--<li><a href="http://youngacademyblog.blogspot.co.uk/" accesskey="6"> Blog </a></li>-->
            </ul>


            <div id="logo">
                <a href="index.php"><img src="img/Logo original.gif" alt="The Young Academy"/></a>
            </div>
            <div class = "grid_4 alpha">

            <div class="telephone grid_4 alpha">
                <img src="img/phone_icon_white.png" alt="small telephone logo" class="align-left small" />
                <p> +44 (0)20 8866 3813 </P>
            </div>
            <div class="timezone">

                    <p><?php
                    date_default_timezone_set('Europe/London');
                    mktime(0,0,0,1,1,1970);
                    echo date('l, d F Y'); 
                    ?> </p>

                    <!--<form action="http://www.example.com/login.php">
                        <p>

                            <input type="text name=search" size="20+" id="search" value="Search this site"
                        </p>
                    </form>!-->



                </div>

            </div>


<ul class="secondmenu grid_6 push_3">

    <li><a class="<?php if ($section == "Musical Glossary") {echo "here" ; } ?>" href="glossary.php">Musical Glossary </a></li>
    <li><a class="<?php if ($section == "FAQ") {echo "here" ; } ?>" href="faq.php">FAQ</a></li>

<ul>                    
            </div> 

        <div class="container_16 clearfix">

            <div class="wmuSlider">
                <div class="wmuSliderWrapper"/>

等。和我的CSS：

/*html5 fix*/
article, aside, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


body {


    background: url("../img/soft_wallpaper.png");



}

/****************
header
*****************/

.header {
    background: #212962 url("../img/header_backgrounddark.png");
    height: 160px;
    width: 100%;
    /*z-index: 11; */


}

#logo {
    float: right;
    position: relative;
    top: -45px;

等

最简单的比较方式可能是在两个浏览器中查看网站，然后点击“查看来源”...

如果有人能提供帮助，我将不胜感激！

此致

罗伯特

Answer 1

这很可能是因为您的CSS不完整。有些浏览器可以容忍这样的事情，但如果你有点冗长，通常更好的是更广泛的跨浏览器支持（并避免奇怪的错误）。

而不仅仅是：

background: url("../img/soft_wallpaper.png");

制作：

background: #ffffff url("../img/soft_wallpaper.png") no-repeat left top;

这告诉浏览器放置背景的位置和枯萎或不重复它。它还提供背景颜色回退，但不会显示图像。

Answer 2

首先，删除这些引号，因为它们会在Safari中产生兼容性问题。正如W3C所说：

某些字符出现在不带引号的URI中，例如括号，必须使用空格字符，单引号（'）和双引号（“）使用反斜杠进行转义，以便生成的URI值为URI token：'（'，'）'。

所以最好不要逃避这些引用，但要从URL中删除它们。

其次，再添加2个属性：

background-repeat: no-repeat;
background-position: left top;

这两个属性会告诉它不重复图像，如果它的大小比它的容器短，而background-position通常需要2个值，水平对齐和垂直 - 对齐，因此图像将显示在容器的左上角。

Answer 3

您的背景图片正常加载，但在IE中，身体背景不可见，因为它被深蓝色.header div覆盖。发生这种情况是因为缺少Doctype声明和标记错误导致IE进入Quirks模式。如果您将网站加载到更大的屏幕上或缩小，则可以看到背景图像。

在Quirks模式下，.wmuSlider的内容强制.header展开，.header的高度会被忽略。修复你的标记，问题就会消失。如果您使用开发人员工具将IE文档模式切换为标准，则可以看到。

为什么我的背景图片没有在ie8中显示？

3 个答案: