JQuery / CSS с Internet Explorer 8 не показывает фоновое изображение - PullRequest
Новая
       1

JQuery / CSS с Internet Explorer 8 не показывает фоновое изображение

0 голосов
/ 14 июня 2011

У меня есть следующий код в JQuery (JavaScript), и отлично работает в Chrome, Safari и Firefox.Тем не менее, он не показывает их в Internet Explorer 8. Что может быть не так?Я использую 960gs в качестве фреймворка CSS. 

// JavaScript
var site_root = "http://localhost:8080";

var banner = new Array();

banner[1] = site_root + "/images/banner-1.png";
banner[2] = site_root + "/images/banner-2.png";
banner[3] = site_root + "/images/banner-3.png";
banner[4] = site_root + "/images/banner-4.png";
banner[5] = site_root + "/images/banner-5.png";
banner[6] = site_root + "/images/banner-6.png";
var counter = 1;

$(document).ready(function() {
    $('#top_banner').hide();
    $('#top_banner').slideDown('slow');

    var timer = setInterval(StepThroughBanners, 5000);

    function StepThroughBanners() {
        var link = "url(" + banner[counter] + ")";
        $('#top_banner').css("background-image", link); 

        if(counter<6) { 
            counter++;
        } else {
            counter = 1;
        }
    }

});

Вот мой CSS: 

#top_banner {
    background: #fff;
    background-image: url("../images/banner-1.png");
    background-repeat:no-repeat;

    color: #fff;
    height: 370px;
    padding: 1em;
}

РЕДАКТИРОВАТЬ: (HTML добавлен) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head><title><?= $title ?></title>
    <!-- load style framework 960 -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/960.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/reset.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/text.css" />
    <!-- load custom styles -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/custom.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="<?= base_url();?>scripts/general.js" type="text/javascript" charset="utf-8"></script>


    </head>
        <body>
            <div class="container_16">
                <div id="top_menu" class="grid_16">


        <div class="menu">
                    <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                    <li><a href="#">item 6</a></li>
                    </ul>
                    </div>
                    <div class="tool">
                    <ul>
                    <li><a href="#">one &#x25BE;</a></li>
                    <li><a href="#">two &#x25BE;</a></li>
                    <li><a href="#">three &#x25BE;</a></li>
                                    </ul>
                    </div>
                    <div class="search">
                        <form>
                        <input type="text" value="search..."></input>
                    </form>
                </div>
            </div>

            <div class="clear"></div>
            <div id="top_banner" class="grid_16">&nbsp;</div>
            <div class="clear"></div>

            <div class="grid_4 mockup">460px</div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup">460px</div>

            <div class="clear"></div>
        </div>
    </body>
</html>

Ответы [ 3 ]

2 голосов
/ 14 июня 2011

отлично работает у меня .Впервые загрузка изображений занимает некоторое время.

Хотя вам следует обновить эту строку, просто чтобы быть уверенным, с: 

var link = "url(" + banner[counter] + ")";

до 

var link = "url('" + banner[counter] + "')";
1 голос
/ 14 июня 2011

Я не вижу ничего необычного в вашем JavaScript или CSS.Вы можете рассмотреть возможность размещения вашего HTML на всякий случай.Кроме того, вы говорите, изображения не будут отображаться.Отображается ли исходное изображение или это не тот случай, когда изображения не будут вращаться?

Вы пытались устранить неполадки в IE?Добавьте предупреждение в StepThroughBanners, чтобы быть уверенным, что он вызывается.

Другая возможность состоит в том, что вам может потребоваться указать дополнительные свойства CSS, чтобы это отображалось в IE.Возможно, значение IE по умолчанию для данного свойства, такого как width, z-index и т. Д., Отличается от других браузеров.

Вы также можете проверить свои настройки в IE.Вы работаете в режиме совместимости?

1 голос
/ 14 июня 2011

Просто быстрое предположение, но не упускаете ли вы при создании CSS-свойства?

Вы используете 

var link = "url(" + banner[counter] + ")";

, что должно возвращать строку типа url(mylocation/myfile.jpg).Может быть, попробуйте использовать 

var link = "url('" + banner[counter] + "')";

вместо того, что должно вернуть url('mylocation/myfile.jpg').

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...