1

上周，我完成了为一家音乐公司编写此网站的代码：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;

等等

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

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

问候，

罗伯特

4

3 回答 3

0

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

而不仅仅是：

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

做了：

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

这告诉浏览器在哪里放置背景并枯萎或不重复它。它还提供了背景颜色回退，以防图像未显示。

于 2013-07-18T13:43:10.520 回答
0

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

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

于 2013-07-18T14:10:50.433 回答
0

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

出现在不带引号的 URI 中的某些字符，例如括号、空格字符、单引号 (') 和双引号 (")，必须使用反斜杠进行转义，以便生成的 URI 值是 URI 标记：'(', ' )'。

所以最好不要转义这些引号，而是将它们从 URL 中删除。

第二件事，再添加 2 个属性：

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

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

于 2013-07-18T13:57:54.907 回答