这是我正在为时钟http://codepen.io/www139/pen/MaxGyW
工作的代码如果您在FireFox中查看[它适用于我测试的OS X上的其他所有浏览器],它看起来像这样:
如何让它像Firefox中的第一个示例一样运行,为什么会发生这种情况?
这是我的HTML,CSS和JavaScript:
html,
body {
margin: 0;
padding: 0;
}
#projectContainer {
background-color: #eee;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#verticalAlign {
-o-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
position: absolute;
top: 50%;
width: 100%;
}
#watchBelt {} #watchContainer {
display: table;
margin: auto;
width: 50vh;
height: 50vh;
position: relative;
border-radius: 50%;
padding: 2vh;
background-color: #AB9883;
}
#watchStructure {
width: 100%;
height: 100%;
}
#watchFace {
width: 100%;
height: 100%;
border-radius: 50%;
/*background: -ms-linear-gradient(-35deg, #444, #eee);
background: -moz-linear-gradient(-35deg, #444, #eee);
background: -webkit-linear-gradient(-35deg, #444, #eee);
background: -o-linear-gradient(-35deg, #444, #eee);
background: linear-gradient(-35deg, #444, #999);
position:relative;*/
background-color: #0E1021;
position: relative;
}
#watchHourHand {
height: 40%;
width: 5%;
background-color: #eee;
position: absolute;
left: 47.5%;
top: 10%;
-o-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
#watchMinuteHand {
width: 3%;
height: 50%;
background-color: #eee;
position: absolute;
left: 48.5%;
-o-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
#watchSecondHand {
width: 2%;
height: 50%;
background-color: #eee;
position: absolute;
left: 49%;
-o-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
* {
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
-webkit-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-webkit-backface-visibility: hidden;
}
.noTransition {
-o-transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}

<div id="projectContainer">
<div id="verticalAlign">
<div id="watchContainer">
<div id="watchBelt"></div>
<div id="watchStructure">
<div id="watchFace">
<div id="markers"></div>
<div id="watchHourHand"></div>
<div id="watchMinuteHand"></div>
<div id="watchSecondHand"></div>
</div>
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:2)
这是因为display:table
的子元素未设置为display:table-cell
。
通过将display:table-cell
添加到#watchStructure
#watchStructure{
width:100%;
height:100%;
display:table-cell;
}