Question

我正在尝试修复错误，我的BG不会出现在IE中。我被困在如何解决它。

BG问题

以下是我实现背景图片的代码。我使用纹理来支持更大分辨率的屏幕。

body
{
    margin: 0px;
    padding: 0px;
    background-image: url("./web_elements/bg.png"), url("./web_elements/tex2.jpg");
    background-repeat: no-repeat,repeat;
    background-position:top center,0 0;
}

Javascript错误

我只在Internet Explorer中得到它，我在firefox和chrome中都没有收到此错误。

以下是IE错误的屏幕截图 http://imagizer.imageshack.us/v2/800x600q90/856/d47x.jpg

这应该是什么样子 http://imagizer.imageshack.us/v2/800x600q90/838/cxao.jpg

这是我的javascript代码

var objSlideTimer;
var objCurrentSlide = parseInt(1);
var objSlideOpacity = parseFloat(1.0);
var objOpacityDirection = parseInt(0);
var objMinOpacity = parseFloat(0.4);    // Lowest Opacity Wanted
var objMinInterval = parseInt(100); // Decreasing Or Increasing Opacity Interval
var objMaxInterval = parseInt(3000);    // Interval To Display Slide
var objMaxSlides = parseInt(3);     // Number Of Slides In The Show
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var objShopSlideTimer;
var objShopCurrentSlide = parseInt(1);
var objShopSlideOpacity = parseFloat(1.0);
var objShopOpacityDirection = parseInt(0);
var objShopMinOpacity = parseFloat(0.4);    // Lowest Opacity Wanted
var objShopMinInterval = parseInt(100);     // Decreasing Or Increasing Opacity Interval
var objShopMaxInterval = parseInt(3000);    // Interval To Display Slide
var objShopMaxSlides = parseInt(6);     // Number Of Slides In The Show

function loadPage(objShowSlides, objShopShowSlides)
{
    try
    {
        if (screen.width <= 1024)
        {
            var objMainBlock = document.getElementById("MainBlock");

            objMainBlock.style.width = "1024px";
            objMainBlock.style.marginLeft = "0px";
        }
        else
        {
            var objMainBlock = document.getElementById("MainBlock");
            var objPad = ((screen.width - 1024) / 2);

            objMainBlock.style.width = "1024px";
            objMainBlock.style.marginLeft = objPad + "px";
        }
        if (objShowSlides == true)
        {
            onSlideTimer();
        }
        if (objShopShowSlides == true)
        {
            onShopSlideTimer();
        }
    }
    catch(err)
    {
        alert("loadPage:\n" + err.description + "\n" + err.message);
    }
}

function resizePage()
{
    try
    {
        if $(window).innerWidth()(window.innerWidth < 1024)
        {
            var objMainBlock = document.getElementById('MainBlock');
            objMainBlock.style.width = "1024px";
            objMainBlock.style.marginLeft = "0px";
        }
        else
        {
            var objMainBlock = document.getElementById('MainBlock');
            var objPad = ((window.innerWidth - 1024) / 2);
            objMainBlock.style.width = "1024px";
            objMainBlock.style.marginLeft = objPad + "px";
        }
    }
    catch(err)
    {
        alert("resizePage:\n" + err.description + "\n" + err.message);
    }
}

function onSlideTimer()
{
    try
    {
        clearTimeout(objSlideTimer);
        var objSlideImage = document.getElementById("SlideImage");

        switch (parseInt(objOpacityDirection))
        {
            case 0: objOpacityDirection = parseInt(1);
                    objSlideOpacity = parseFloat(1.0);
                    objSlideTimer = setTimeout(onSlideTimer, objMaxInterval);
                    break;
            case 1:     objSlideOpacity = parseFloat(objSlideOpacity - 0.1);
                    if (objSlideOpacity < objMinOpacity)
                    {
                        objOpacityDirection = parseInt(2);
                        objCurrentSlide = ((objCurrentSlide === objMaxSlides) ? 1 : objCurrentSlide += 1);
                    }
                    objSlideTimer = setTimeout(onSlideTimer, objMinInterval);
                    break;
            case 2: objSlideOpacity = parseFloat(objSlideOpacity + 0.1);
                    objOpacityDirection = parseInt(objSlideOpacity > 0.9 ? 0 : 2);
                    objSlideTimer = setTimeout(onSlideTimer, objMinInterval);
                    break;
        }
        switch(parseInt(objCurrentSlide))
        {
            case 1: objSlideImage.src = "./banners/jr_banner.png";
                objSlideImage.style.opacity = parseFloat(objSlideOpacity).toFixed(1);
                break;
            case 2: objSlideImage.src = "./banners/lessons_banner.jpg";
                objSlideImage.style.opacity = parseFloat(objSlideOpacity).toFixed(1);
                break;
            case 3: objSlideImage.src = "./banners/tcg_banner.png";
                objSlideImage.style.opacity = parseFloat(objSlideOpacity).toFixed(1);
                break;
            case 4: objSlideImage.src = "./images/ua/slide4.jpg";
                objSlideImage.style.opacity = parseFloat(objSlideOpacity).toFixed(1);
                break;
            case 5: objSlideImage.src = "./images/ua/slide5.jpg";
                objSlideImage.style.opacity = parseFloat(objSlideOpacity).toFixed(1);
                break;
        }
    }
    catch(err)
    {
        alert("onSlideTimer:\n" + err.description + "\n" + err.message);
    }
}

function onShopSlideTimer()
{
    try
    {
        clearTimeout(objShopSlideTimer);
        var objShopSlideImage = document.getElementById("ShopSlideImage");

        switch (parseInt(objShopOpacityDirection))
        {
            case 0: objShopOpacityDirection = parseInt(1);
                objShopSlideOpacity = parseFloat(1.0);
                objShopSlideTimer = setTimeout(onShopSlideTimer, objMaxInterval);
                break;
            case 1: objShopSlideOpacity = parseFloat(objShopSlideOpacity - 0.1);
                if (objShopSlideOpacity < objMinOpacity)
                {
                    objShopOpacityDirection = parseInt(2);
                    objShopCurrentSlide = ((objShopCurrentSlide === objShopMaxSlides) ? 1 : objShopCurrentSlide += 1);
                }
                objShopSlideTimer = setTimeout(onShopSlideTimer, objMinInterval);
                break;
            case 2: objShopSlideOpacity = parseFloat(objShopSlideOpacity + 0.1);
                objShopOpacityDirection = parseInt(objShopSlideOpacity > 0.9 ? 0 : 2);
                objShopSlideTimer = setTimeout(onShopSlideTimer, objMinInterval);
                break;
        }
        switch(parseInt(objShopCurrentSlide))
        {
            case 1: objShopSlideImage.src = "./shop/lotto_vector.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
            case 2: objShopSlideImage.src = "./shop/lotto_rapor_pink.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
            case 3: objShopSlideImage.src = "./shop/lotto_rapor_orange.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
            case 4: objShopSlideImage.src = "./shop/volkl_bordeaux.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
            case 5: objShopSlideImage.src = "./shop/volkl_c10.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
            case 6: objShopSlideImage.src = "./shop/volkl_organix.png";
                objShopSlideImage.style.opacity = parseFloat(objShopSlideOpacity).toFixed(1);
                break;
        }
    }
    catch(err)
    {
        alert("onSlideTimer:\n" + err.description + "\n" + err.message);
    }
}

Answer 1

在IE8中，window.innerWidth为undefined。作为后备，请检查document.documentElement.clientWidth和document.body.clientWidth：

function resizePage() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var objMainBlock = document.getElementById('MainBlock');
    var objPad = width > 1024 ? (width - 1024) / 2 : 0;
    objMainBlock.style.width = "1024px";
    objMainBlock.style.marginLeft = objPad + "px";
}

see this answer

但是，你可以用margin: 0 auto达到同样的效果。仅限CSS，无需JavaScript：

#MainBlock {
    width: 1024px;
    margin: 0 auto;
}

jsfiddle.net/x2JFp

调整页面无效参数。参数无效| BG不会出现在IE中

1 个答案: