CSS/JS 在 firefox 中不工作，在 chrome 上工作 [关闭]

Question

似乎这段代码在大多数浏览器中运行良好，除了 Firefox。 我尝试了 css 和 js 调整中的 moz 缩写，但没有帮助，也许 Mozzila Firefox 不支持的属性或..？帮助。

// CSS：

html, body{
    width:100%;
    height:100%;
    margin: 0 auto;
    padding: 0;
}

body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

header{
    text-align: center;
}
header > h1{
    text-shadow: 1px 1px 1px #888, 1px 1px 1px #EEE;
    font-size: 10pt;
    color: white;
}
header > h2{
    font-size: 10pt;    
    color: black;
}
header > nav > ul{
    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:"horizontal";
    margin: 0 auto;
    padding: 0;
    list-style:none;
    width: 300px;
    height: 60px;
    position: relative; 
    z-index: 2;
}
header > nav > ul > li{

    -webkit-box-flex: 1;    
    -webkit-user-select: none;
    -moz-box-flex: 1;
    -moz-user-select: none;
}

#carousel{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    background: black;  
    padding: 0;
    text-align: center;
    margin: 0 auto;
    border: 1px solid gray;
    box-shadow: 3px 3px 7px #777;
}

#carousel > div{ 
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    padding: 0;
}

#carousel > div > ul{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    margin: auto auto;
    padding: 0;
    background: transparent;
}

#carousel ul li{
    list-style: none;
    position: absolute;
}


//    JS important part:

    function Element(id, width, height, params){

        this.width = width;
        this.height = height;

        this.rotateX = params.rotate.x;
        this.rotateY = params.rotate.y;
        this.rotateZ = params.rotate.z;

        this.margin = 10;

        this.translateX = params.translate.x;
        this.translateY = params.translate.y;
        this.translateZ = -(params.translate.z + this.margin);

        var dom = document.createElement("li");
        dom.style.display = "-moz-box";
        dom.style.mozBoxOrient = "vertical";

        dom.style.width = this.width+"px";
        dom.style.height = this.height+"px";
        dom.style.padding = "10px";
        dom.style.background = "00ff00";
        dom.style.opacity = "0.8";

        //use flex
        var imgObj = getImageUrl();
        var img = document.createElement("div");
        img.style.mozBoxFlex = "10";
        img.style.background = "url("+imgObj.url+") no-repeat white";
        img.style.mozBackgroundSize = "100% 100%"; 

        var title = document.createElement("div");
        title.style.mozBoxFlex = "1";
        title.style.textAlign = "center";
        title.style.paddingTop = "5px";
        title.textContent = imgObj.title;
        title.style.background = "#2e3231";
        title.style.color = "white";
        dom.appendChild(img);
        dom.appendChild(title);

        // dom.style.opacity = "0.8";
        dom.style.mozUserSelect = "none";
        dom.id = id;
        dom.addEventListener("click", elementClickHandler);
        dom.style.mozTransform  = "rotateY("+this.rotateY+"rad) translateY("+this.translateY+"px) translateZ("+this.translateZ+"px)";



        this.getElement = function(){
            return dom;
        }

        this.update = function(){
            dom.style.mozTransform  = "rotateY("+this.rotateY+"rad) translateY("+this.translateY+"px) translateZ("+this.translateZ+"px)";
        }

Answer 1

您正在使用尚未被采纳为标准的实验性功能。您可以通过供应商前缀来判断这一点，这些前缀允许您尝试这些功能。对于 Chrome，前缀是：

-webkit-

Yuo 已经包含了这个前缀，所以 Chrome 很高兴。但是，Firefox 对这些功能的前缀是：

-moz-

因此，如果您想要更广泛的支持，您需要包含所有可能的变体：

-webkit-box-orient: "horizontal";
-moz-box-orient: "horizontal";
-o-box-orient: "horizontal"; //For opera
-ms-box-orient: "horizontal"; //For IE < 10
box-orient: "horizontal"; //For the future

您应该考虑利用 Modernizr，它可以在您的 javascript 代码中规范化其中的一些内容：

http://modernizr.com/

作为一个例子，下面是我将如何规范化 animation-duration 属性：

 this.animationDurationNames = {
        'WebkitAnimation' : 'webkitAnimationDuration',
        'OAnimation' : 'oAnimationDuration',
        'msAnimation' : 'MSAnimationDuration',
        'animation' : 'animationDuration'
    };

 var animationDurationName = this.animationDurationNames[ Modernizr.prefixed( 'animation' ) ]; 

现在，当我需要使用 animation-duration 属性时，我可以简单地引用 animationDurationName，而不必担心所有前缀。