調整頁面無效參數的大小。 無效參數| BG不會出現在IE中

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";
}

看到這個答案

但是，您可以使用margin: 0 auto實現相同的效果margin: 0 auto 。 僅CSS，不需要JavaScript：

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

jsfiddle.net/x2JFp