html - 显示 :table-cell not supported in Mozilla Firefox

Question

我有一个跟随的div

<div>Circle</div>

我使用第 n 个子元素将样式应用于圆圈，圆圈和其中的文本应该旋转。一开始，当我创建圆圈时，我使用

display:table-cell; 

属性将文本定位在圆的中心。当我在 Chrome 中运行我的页面时，包括定位在内的所有样式看起来都很完美。但是，当我在 Mozilla Firefox 中运行我的代码时，我注意到当我有 display:table-cell; 时，定位 left 和 top 不起作用；属性集。它们只有在我移除显示器时才有效。但是，如果我移除显示器，那么我的文字就会变得凌乱。在这种情况下，我决定创建一个伪 div。我设法将文本定位在圆圈的中心，但是，当我刷新页面时，旋转的圆圈向右推，文本不旋转。我该如何解决这个问题？

样式.css

div:nth-child(3) {
width: 150px;
height: 150px;

background: -webkit-linear-gradient(#006600, #009900, #006600);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006600, #009900, #006600);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006600, #009900, #006600);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#006600, #009900, #006600);
/* Standard syntax */
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
text-align: center;
vertical-align: middle;
position: relative;
display:table-cell;
top: 5%;
left: 75px !important;
color: #F0F0F0;
font-size: 25px;
-webkit-animation-name: spin;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from {
    -ms-transform: rotate(0deg);
}
to {
    -ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(360deg);
}
}

下面的代码是我做一个伪div的时候，我没有包含旋转的css，因为它和上面的代码是一样的。圆圈在旋转，但在旋转的那一秒，它向右旋转，然后又回来了。文本不旋转。

  div:nth-child(3){
    text-align:center;
    position:relative;
    width: 150px;
    top: 50%;
    left: 75%;
    color: #F0F0F0;
    font-size: 20px;
}

div:nth-child(3):after {
   content: '';
   width: 150px;
   height: 150px;
   position: absolute;
   bottom: -80%;
   left: 50%;
   transform: translateX(-50%);
   z-index: -1;
   background: -webkit-linear-gradient(#006600, #009900, #006600);
   /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#006600, #009900, #006600);
   /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#006600, #009900, #006600);
   /* For Firefox 3.6 to 15 */
   background: linear-gradient(#006600, #009900, #006600);
   /* Standard syntax */
   -moz-border-radius: 150px;
   -webkit-border-radius: 150px;
   border-radius: 150px;
  }

jsFiddle:http://jsfiddle.net/jLwmknk1/

Answer 1

尝试应用这个:

display: table;
table-layout: fixed;

代替 display:table-cell;