Question

我有以下div

<div>Circle</div>

我使用nth-child将样式应用于圆圈，圆圈和其中的文本应该旋转。一开始，当我创建圆圈时，我使用了

display:table-cell;

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

的style.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;

display：Mozilla Firefox不支持table-cell

1 个答案: