似乎这个代码在大多数浏览器中运行良好,除了Firefox。 我尝试了css和js调整中的moz abreviations,它没有帮助,也许有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)";
}
答案 0 :(得分:2)
您正在使用尚未作为标准采用的实验性功能。您可以告诉这一点,因为供应商前缀允许您尝试这些功能。对于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代码中规范化其中的一部分:
作为示例,以下是我如何规范化animation-duration
属性:
this.animationDurationNames = {
'WebkitAnimation' : 'webkitAnimationDuration',
'OAnimation' : 'oAnimationDuration',
'msAnimation' : 'MSAnimationDuration',
'animation' : 'animationDuration'
};
var animationDurationName = this.animationDurationNames[ Modernizr.prefixed( 'animation' ) ];
现在,当我需要使用animationDurationName
属性时,我可以简单地引用animation-duration
,而不必担心所有前缀。