<分区>
似乎这段代码在大多数浏览器中都能正常工作，但 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)";
}
最佳答案
您正在使用尚未被采纳为标准的实验性功能。您之所以能够分辨出这一点，是因为 vendor 前缀允许您试用这些功能。对于 Chrome，前缀是:
-webkit-
你已经包含了这个前缀，所以 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 代码中的某些内容:
例如，这里是我将如何规范化 animation-duration 属性:
this.animationDurationNames = {
'WebkitAnimation' : 'webkitAnimationDuration',
'OAnimation' : 'oAnimationDuration',
'msAnimation' : 'MSAnimationDuration',
'animation' : 'animationDuration'
};
var animationDurationName = this.animationDurationNames[ Modernizr.prefixed( 'animation' ) ];
现在，当我需要使用 animation-duration 属性时，我可以简单地引用 animationDurationName，而不必担心所有前缀。
关于javascript - CSS/JS 不适用于 firefox，适用于 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23135320/